How to change `sourceMappingURL` using webpack

Question

My product web package configuration:

{ 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 automatically generated the CDN URL https://cdn.example.com/sub-directory/app-12345.min.js for the main script.

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

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

Answer 1

Finally, this is possible in Webpack 3 using the guide from @omj's answer and the 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):

Added new option with Webpack v3.10.0 . An option called publicPath :

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

Answer 2

The SourceMapDevToolPlugin plugin is an option.

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

Answer 3

With Webpack 2, you can use the hidden source map for devtool and banner-webpack-plugin from https://github.com/lcxfs1991/banner-webpack-plugin and install something like this:

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

Answer 4

Pay attention to devtool: false. This is necessary if you want to specify custom values. This works for webpack 4.x:

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