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?

did you find a solution to this, im facing the same issue – jamescharlesworth Oct 04 '16 at 22:46 — jamescharlesworth, Oct 04 '16 at 22:46

score 9 · Answer 1 · answered Oct 24 '16 at 20:51

9

The SourceMapDevToolPlugin plugin is an option.

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

answered Oct 24 '16 at 20:51

ornj

720
7
16

Resulted file will contain two `sourceMappingURL` strings in this case. `//# sourceMappingURL=https://example.com/app.js.map` and `//# sourceMappingURL=app.js.map` – Ky6uk Apr 18 '17 at 23:25
1

to fix this use `config.devtool = 'hidden-source-map'` then `append: ...` – daviestar Dec 13 '17 at 11:53

Ky6uk · Accepted Answer · 2017-12-05T12:01:28.930

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/'
});

score 6 · Answer 3 · answered Jun 13 '19 at 09:40

Note the devtool: false. You need that if you want to provide 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'
  })
  ]
};

score 0 · Answer 4 · edited Jul 20 '17 at 14:04

0

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

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

edited Jul 20 '17 at 14:04

J-Alex

6,881
10
46
64

answered Jul 20 '17 at 12:09

Dorota Przeniosło

1

How to change `sourceMappingURL` by using webpack

4 Answers4