2

升级到 webpack 5 后，无法通过 SourceMapDevToolPlugin 排除 vendor.js 文件进行源映射。

// 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：假。

我对吗？

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

4

1 回答 1

3

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

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

于 2020-10-15T06:18:54.140 回答