如何使用 CommonsChunkPlugin、UglifyJsPlugin 和 SourceMapDevToolPlugin 为单个块获取正确的源映射文件？

Question

我正在尝试让 webpack 为 React 项目输出正确的源映射，该项目使用 CommonsChunkPlugin 分成应用程序和供应商块，并使用 UglifyJsPlugin 缩小。这是针对生产环境的，所以我：

不想为供应商包生成一个巨大的 sourcemap。
不想在映射文件中使用 webpack:// 源代码
不想要 css
需要实际的地图文件输出并链接到 js 文件，以便错误监控工具可以加载它

所有这些对于 devtool 配置选项来说似乎有点太多了，所以我尝试直接将 SourceMapDevToolPlugin 与 devtool: false 一起使用。

webpack 配置的相关部分如下所示：

entry: production ? {
    app: './src/index.jsx',
    vendor: Object.keys(packageDotJson.dependencies)
} : './src/index.jsx',

output: {
    path: production ? './dist' : './assets',
    publicPath: production ? '' : '/',
    filename: production ? 'app.[hash].js' : 'app.js'
},

plugins: production ? [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.[hash].js"),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new ExtractTextPlugin("app.[hash].css"),
    new webpack.SourceMapDevToolPlugin({
        test: [/\.js$/, /\.jsx$/],
        filename: "app.[hash].js.map",
        append: "//# sourceMappingURL=[url]",
        moduleFilenameTemplate: "[absolute-resource-path]",
        fallbackModuleFilenameTemplate: "[absolute-resource-path]",
        columns: false
    }),
    new HtmlWebpackPlugin({...})
] : [
    new HtmlWebpackPlugin({...})
]

遗憾的是，我得到的是一个以我的应用程序 js 文件正确命名的地图文件，但包含：

{"version":3,"file":"vendor.bundle.05d4e19a02044f47a73a.js","sources":["vendor.bundle.05d4e19a02044f47a73a.js","*"]...}

更改测试 to test: /^app\.(.*)\.js$/, 会创建一个类似的映射文件，将 app.05d4e19a02044f47a73a.js 映射到自身。我好像在sources中获取不到原始的js和jsx源文件。

我试过使用插件顺序，但没有任何改变。

我做错了什么？

我也不清楚 test/include/exclude 应该指向原始资源还是缩小的 js 文件。对于其他加载器和插件，这有点明显，但对于 SourceMapDevToolPlugin 则不然。

Answer 1

好的，我自己想出了一个解决方案。我的 SourceMapDevToolPlugin 选项实际上没有过滤掉供应商包，但文件名设置为 "app.[hash].js.map"，这导致生成供应商块映射并覆盖具有相同文件名的应用程序块映射。

正确的选项是：

    new webpack.SourceMapDevToolPlugin({
        test: [/\.js$/, /\.jsx$/],
        exclude: 'vendor',
        filename: "app.[hash].js.map",
        append: "//# sourceMappingURL=[url]",
        moduleFilenameTemplate: '[resource-path]',
        fallbackModuleFilenameTemplate: '[resource-path]',
    })

缩小的应用程序。[hash].js 包含在源代码中，但这似乎不会对浏览器造成任何问题。

columns: false 是导致插件出于某种原因仅将缩小文件映射到自身的原因。

如何使用 CommonsChunkPlugin、UglifyJsPlugin 和 SourceMapDevToolPlugin 为单个块获取正确的源映射文件？

How to get correct source map file for a single chunk with CommonsChunkPlugin, UglifyJsPlugin and SourceMapDevToolPlugin?

javascript

webpack

source-maps