How to change `sourceMappingURL` by using webpack

Question

My production webpack configuration is:

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

  devtool: 'source-map',

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

Now I have two files app-12345.min.js and app-12345.min.js.map.

I also have automatically generated CDN URL https://cdn.example.com/sub-directory/app-12345.min.js for main script.

But sourceMappingURL is still relative path //# sourceMappingURL=app-12345.min.js.map and not accessible directly in browser.

My question is how I can set sourceMappingURL as absolute automatically generated path?

Answer 1

Finally this is possible in Webpack 3 using guide from the @omj's response and following configuration

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

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

---

Update (Webpack v3.10.0):

A new option has been added since Webpack v3.10.0. The option called publicPath:

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