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

Question

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

• 不希望为 vendor 包生成庞大的 sourcemap。
• 不想在 map 文件中使用 webpack://资源
• 不想要 css 的 map 文件
• 需要实际的 map 文件输出并链接到 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 文件正确命名的 map 文件，但包含:

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

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

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

我做错了什么？

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

Answer 1

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

正确的选项是:

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

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

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