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!
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: ''
}
]
}
])
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