如何使用 webpack 更改 `sourceMappingURL`

Question

我的生产 webpack 配置是：

{
  output: {
    publicPath: "https://cdn.example.com/sub-directory/",
    filename: '[name]-[chunkhash].min.js'
  },

  devtool: 'source-map',

  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

现在我有两个文件 app-12345.min.js 和 app-12345.min.js.map。

我也为主脚本自动生成CDN URL https://cdn.example.com/sub-directory/app-12345.min.js。

但是 sourceMappingURL 仍然是相对路径 //# sourceMappingURL=app-12345.min.js.map 并且不能直接在浏览器中访问。

我的问题是如何将 sourceMappingURL 设置为自动生成的绝对路径？

Answer 1

SourceMapDevToolPlugin 插件是一个选项。

new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    append: '\n//# sourceMappingURL=' + path + '[url]'
});

Answer 2

最后，这在 Webpack 3 中是可能的，使用 @omj 的响应指南和以下配置

  devtool: 'hidden-source-map', // SourceMap without reference in original file

  new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    append: `\n//# sourceMappingURL=${path}[url]`
  })

更新（Webpack v3.10.0）：

自 Webpack v3.10.0 以来添加了一个新选项。名为 publicPath 的选项：

new webpack.SourceMapDevToolPlugin({
  filename: '[file].map',
  publicPath: 'https://example.com/dev/'
});

Answer 3

在 Webpack 2 中，您可以使用 hidden-source-map 作为 devtool 和 banner-webpack-plugin 来自 https://github.com/lcxfs1991/banner-webpack-plugin 并设置如下：

new banner({
    chunks: {
        "main": {
            afterContent: "\n//# sourceMappingURL=custom/url/to/map\n"
         }
    }
})

Answer 4

注意开发工具：false。如果您想提供自定义值，则需要它。这适用于 webpack 4.x:

module.exports = {
  // ...
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
       filename: 'sourcemaps/[file].map',
       publicPath: 'https://example.com/project/',
       fileContext: 'public'
  })
  ]
};

如何使用 webpack 更改 `sourceMappingURL`

How to change `sourceMappingURL` by using webpack

javascript

cdn

uglifyjs

source-maps

webpack