如何使用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.

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

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

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

Answer 1

该SourceMapDevToolPlugin插件是一个选项.

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

Answer 2

最后，可以使用@omj响应中的指南以及以下配置在Webpack 3中实现

  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

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

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