webpack v5 SourceMapDevToolPlugin "exclude" 选项不起作用

Question

升级到 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 issue link 提到了 UglifyJsPlugin 的问题，但我们没有使用它，所以我排除了它。

尽管我将 config.devtool 设置为 false，但 SourceDevToolPlugin 配置有效。

我的配置有问题吗？

更新：我想我现在明白了。看起来我真的必须根据这个例子将 devtool 设置为 false：https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

我只是认为 devtool 对于开发模式应该只设置为 false 因为这条注释：

If you want to use a custom configuration for this plugin in development mode, make sure to disable the default one. I.e. set devtool: false.

我说得对吗？

更新 1：是的！看来我是对的。我应该阅读关于 github 问题的其他评论：https://github.com/webpack/webpack/issues/2431#issuecomment-245547872 很抱歉浪费了大家的时间。

Answer 1

这是一个非常愚蠢的错误。我误解了插件的文档： https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

将 devtool 设置为 false 解决了这个问题。

webpack v5 SourceMapDevToolPlugin "exclude" 选项不起作用

webpack v5 SourceMapDevToolPlugin "exclude" option not working

javascript

source-maps

webpack-5