Mini-css-extract-plugin: Prevent sourceMapUrl from appearing on extracted css file

Created on 31 Jul 2018  路  5Comments  路  Source: webpack-contrib/mini-css-extract-plugin

I am importing a css file in my app entry.js. I want to prevent the sourceMapUrl from appearing on the extracted css file. I've tried passing sourceMap : false to both css-loader and mini-css-extract-plugin, but it still generates the sourceMappingURL.

Here are the relevant snippets of my config

new MiniCssExtractPlugin({
    filename: isDev
      ? '../static/stylesheets/core.css'
      : '../static/stylesheets/core.[contenthash].css'
})
rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              sourceMap: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: false
            }
       }
]

Expected output:
No sourceMapUrl in the extracted css file.

Actual output:
/*# sourceMappingURL=../../../../entry.map*/

Version info:
webpack : 4.16.3
css-loader : 0.28.11
mini-css-extract-plugin : 0.4.1

Any help is appreciated. Thanks!

3 (important) 4 (inconvenient) bug

Most helpful comment

I ended up working around this by post processing and replacing the sourceMap url once the file was generated. It's not ideal, but it worked.
Here's the plugin and code I used

  new ReplaceInFileWebpackPlugin([
    {
      dir: '../static/stylesheets/',
      test: /core\.[a-f0-9]+\.css$/,
      rules: [
        {
          search: /\/\*# sourceMappingURL=.+\*\/$/,
          replace: ''
        }
      ]
    }
  ])

All 5 comments

Please provide a small reproduction repo

Bug in webpack, he always generate source map when you use devtool: "source-map" even source map doesn't exists, workaround set devtool to false when you don't need source maps

as workaround you can use devtool: false and the SourceMapDevToolPlugin directly and specify a different test option, i. e. /\.js$/

there is a if(sourceMap) in the SourceMapDevToolPlugin: https://github.com/webpack/webpack/blob/master/lib/SourceMapDevToolPlugin.js#L85

MCEP uses OriginalSource which also has a source mapping. So even if the css-loader doesn't emit a SourceMap to the original files, MCEP still generates a SourceMap to "unbundle" the parts. With "unbundle" I mean: The emitted CSS file is a concatenation of multiple inner CSS files. The emitted SourceMap splits the concatenated file into the inner files.

You could add an sourceMap: false option to MCEP, which uses RawSource instead of OriginalSource. The RawSource has no mappings and the SourceMapDevToolPlugin would not generate a .map file.

I ended up working around this by post processing and replacing the sourceMap url once the file was generated. It's not ideal, but it worked.
Here's the plugin and code I used

  new ReplaceInFileWebpackPlugin([
    {
      dir: '../static/stylesheets/',
      test: /core\.[a-f0-9]+\.css$/,
      rules: [
        {
          search: /\/\*# sourceMappingURL=.+\*\/$/,
          replace: ''
        }
      ]
    }
  ])
Was this page helpful?
0 / 5 - 0 ratings

Related issues

stavalfi picture stavalfi  路  4Comments

skrobek picture skrobek  路  4Comments

dmitrybelyakov picture dmitrybelyakov  路  3Comments

elgs picture elgs  路  3Comments

fvigotti picture fvigotti  路  4Comments