How can I configure webpack 3.5.4 to only create source maps for JS, and skip CSS?

Question

I've been trying to figure out how to skip the CSS source maps in production, because I only need JS. Is there a way to do this?

I can just delete the *.css.map files later, but I think the build would be faster if I can skip them.

Answer 1

The following is a snippet from my webpack config. You can simply set the value of sourceMap option to false:

 {
                    test: /\.css$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                importLoaders: 2,
                            },
                        },
                        {
                            loader: 'resolve-url-loader',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: false,
                            },
                        },
                    ],
                },

You can also use suppress-chunks-webpack-plugin to remove the .css.map files, because webpack still writes them even if they are empty.

Add a new plugin to your config:

// Skip empty CSS source maps
new SuppressChunksPlugin([     
  { name: 'your-entry', match: /\.css\.map$/ },
]),