如何使用 webpack 更改`sourceMappingURL`答案

【问题标题】：How to change `sourceMappingURL` by using webpack如何使用 webpack 更改`sourceMappingURL`
【发布时间】：2019-06-13 17:40:04
【问题描述】：

我的生产 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 设置为自动生成的绝对路径？

【问题讨论】：

你找到解决方案了吗，我面临同样的问题

标签： javascript webpack cdn source-maps uglifyjs

【解决方案1】：

SourceMapDevToolPlugin 插件是一个选项。

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

【讨论】：

在这种情况下，结果文件将包含两个 sourceMappingURL 字符串。 //# sourceMappingURL=https://example.com/app.js.map 和 //# sourceMappingURL=app.js.map
修复这个使用config.devtool = 'hidden-source-map'然后append: ...

【解决方案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/'
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用 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"
         }
    }
})

【讨论】：