Webpack 不发出 css sourcemap (with sourcemap: true)

Question

I can't make my webpack to emit css sourcemap. I've put sourcemap: true everywhere where possible, and no effect, and all the solutions online suggest either this or some other plugin configuration, but I don't have any other plugin, it's super simple webpack.config.js

This is my webpack.config.js:

 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); var path = require("path"); module.exports = { entry: "./main.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", sourceMapFilename: '[file].map' }, devtool: 'source-map', module: { rules: [{ test: /\\.js$/, use: { loader: "babel-loader", options: { presets: ["es2015"], sourceMap: true } } }, { test: /\\.scss$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '/', sourceMap: true, hmr: process.env.NODE_ENV === 'development', }, }, { loader: "css-loader", options: { sourceMap: true } }, { loader: "sass-loader", options: { sourceMap: true }, } ] }, { test: /\\.(png|woff|woff2|eot|ttf|svg|jpg)$/, use: [{ loader: 'url-loader', options: { name: 'images/[hash]-[name].[ext]' } }] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', ignoreOrder: false, // Enable to remove warnings about conflicting order sourceMap: true }), ], };

I need this source map in dev mode, but only two files get emited main.css and bundle.js.

Answer 1

For those who also struggle with this, the below webpack.config.js is a proper configuration for having style's sourcemap in dev mode. Bundle.js needs to be included when in dev mode, and custom.min.css needs to be added to the HTML document in production mode.

Edit: Unfortunately this can be also wrong. Right now without any change to webpack or node, the sourcemap is not generating :/ sometimes it works, and sometimes it doesn't. There is some bug in webpack, or in some plugins, either way it's a serious bug, but it's webpack so I am not surprised...

Edit 2: Now I see that the problem is only in Firefox, Chrome and Opera have the correct map.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
    entry: "./main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/"
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader" ,
                        options: {
                            sourceMap: true
                        }// translates CSS into CommonJS
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        } // compiles Sass to CSS
                    }
                ]
            },
            { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,  
                use: [{
                    loader: 'url-loader',
                    options: { 
                         name: 'images/[hash]-[name].[ext]'
                    } 
                }] }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/custom.min.css'
        })
    ]
};