Параметр исключения webpack v5 SourceMapDevToolPlugin не работает

После обновления до 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 Извините за зря потраченное время.


person PenguinBlues    schedule 15.10.2020    source источник
comment
Отвечает ли это на ваш вопрос? Webpack 5: devtool ValidationError, недопустимый объект конфигурации   -  person kmgt    schedule 21.12.2020
comment
ох, это тоже мое решение. пожалуйста, смотрите ответ ниже. спасибо, что указали!   -  person PenguinBlues    schedule 22.12.2020


Ответы (1)


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

Установка devtool на false устранила проблему.

person PenguinBlues    schedule 15.10.2020