Question

我正在尝试让webpack为React项目输出正确的源图，该项目使用CommonsChunkPlugin拆分为app和vendor块，并使用UglifyJsPlugin缩小。这是针对生产环境的，所以我：

不希望生成供应商包的巨大源图。
不想要地图文件中的webpack：//来源
不想要css的地图文件
需要实际的地图文件输出并链接到js文件，以便错误监控工具可以加载它

这对devtool配置选项来说似乎有点太多了，所以我试图直接使用devtool：false来使用SourceMapDevToolPlugin。

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({...})
]

可悲的是，我得到的是一个在我的app js文件后正确命名的地图文件，但包含：

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

更改测试to test: /^app\.(.*)\.js$/,会创建一个类似的地图文件，将app.05d4e19a02044f47a73a.js映射到自身。我似乎无法在源代码中获取原始的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为单个块获取正确的源映射文件？

1 个答案: