javascript - 为什么最小化source时没有生成sourcemap？

Question

我需要将源映射添加到 Webpack 4 生产构建中。

我正在使用以下配置:

{
  …
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
      }),
    ],
  },
  devtool: 'source-map'
  …
}

然而，尽管这最小化了包，但它会在 main.js.map 处产生几乎空的源映射:

{"version":3,"file":"main.js","sources":["webpack://AdminFrontend/main.js"],"mappings":";AAAA","sourceRoot":""}

如果我将 minimize 设置为 false，我会得到一个完整的 source-map，但包很大。

我需要做什么才能最小化源并生成完整的源映射？

Answer 1

你可以像这样自定义 webpack 最小化配置

const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
  const { sourceMap: uglifySourceMap, code } = require('uglify-js').minify(input);
  return { map: sourceMap, code, warnings: [], errors: [], extractedComments: [] };
}

optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        parallel: true,
        minify: minify,
      }),
    ],
  },

完成后你会得到完整的内容 map 文件