webpack v5 SourceMapDevToolPlugin опция "exclude" не работает

После обновления до webpack 5 файл vendor.js не мог быть исключен из сопоставления источника через SourceMapDevToolPlugin.

       // webpack.config.ts - removed other config for brevity
import { Configuration } from 'webpack-dev-server';

export default (env) => {
  const config: Configuration = {};
  config.mode = 'production';
  config.entry = './entry.app.js';

  config.output = {
    path: path.join(__dirname, '/public'),
    pathinfo: true,
    filename: '[name].[fullhash].js',
    chunkFilename: '[name].[fullhash].js',
  };

  config.devtool = 'source-map';
  config.bail = true;
  config.plugins = [
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map',
      exclude: ['vendor.js'],
    }),
  ];

  config.optimization = {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: false,
        sourceMap: false,
      }),
      new CssMinimizerPlugin(),
    ],
    moduleIds: 'deterministic',

    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 100,
      minSize: 0,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /([/\\]node_modules[/\\]|[/\\]dev[/\\]vendor[/\\])/,
          chunks: 'all',
        },
      },
    },
  };

 return config;
}
       // entry.app.js - removed some lines for brevity

import './horrible-asset-loader';
import './setup-for-angular';
import { runApp } from './assets/js/app';
runApp();
       // horrible-asset-loader.js
// contains a lot of require statements of npm packages saved into our repository under a vendor folder. crazy i know but I don't know why this was done.

require('ng-bs-daterangepicker/dist/ng-bs-daterangepicker.min.js'); // throwing an error when building because webpack is trying to create a source map for it

// Temporary solution to bundle multiple javascript files into one. This will be replaced by ES6 import.

SourceMapDevToolPlugin исключает конфигурацию, которую я пробовал до сих пор:

       // from https://webpack.js.org/plugins/source-map-dev-tool-plugin/#exclude-vendor-maps
exclude: ['vendor.js'] 

//from https://github.com/webpack/webpack/issues/2431
exclude: /vendor.*.*/
exclude: 'vendor'

// just me desperately trying every possible config
exclude: ['vendor']
exclude: /vendor\.[0-9a-zA-Z]\.js/
exclude: 'vendor.js'
exclude: ['vendor.[chunkhash].js']
exclude: ['vendor.[fullhash].js']

В ссылке на проблему github упоминается проблема с UglifyJsPlugin, но мы ее не используем, поэтому я исключил ее.

Хотя если я установил config.devtool к false, то SourceDevToolPlugin конфиг работает.

Что-то не так с моей конфигурацией?

ОБНОВЛЕНИЕ: я думаю, что понял. Похоже, мне просто нужно установить devtool в false на основе этого примера: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

я только подумал devtool должен быть установлен только на false для режима разработки из-за этого примечания:

Если вы хотите использовать настраиваемую конфигурацию для этого плагина в режиме разработки, обязательно отключите конфигурацию по умолчанию. Т.е. установить devtool: false.

Я прав?

ОБНОВЛЕНИЕ 1: Ага! похоже я прав. Я должен был прочитать другие комментарии по проблеме с github: https://github.com/webpack/webpack/issues/2431#issuecomment-245547872 Извините, что зря потратил время.

1 ответ

Это была действительно глупая ошибка. Я неправильно понял документацию для плагина:https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

Настройка devtool на false исправлена ​​проблема.

Другие вопросы по тегам