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

Question

我无法让我的 webpack 发出 css sourcemap。 我把 sourcemap: true 放在任何可能的地方，没有效果，网上所有的解决方案都建议这个或其他一些插件配置，但我没有任何其他插件，它是超级简单的 webpack.config.js

这是我的 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 }), ], };

我在开发模式下需要这个源映射，但只有两个文件被发出 main.css 和 bundle.js。

Answer 1

对于那些也为此而苦恼的人，下面的 webpack.config.js 是在开发模式下使用样式源映射的正确配置。 在开发模式下需要包含Bundle.js，在生产模式下需要将custom.min.css添加到HTML文档中。

编辑：不幸的是，这也可能是错误的。 现在没有对 webpack 或 node 进行任何更改，源映射没有生成：/有时它有效，有时它不起作用。 webpack 或某些插件中存在一些错误，无论哪种方式，它都是一个严重的错误，但它是 webpack，所以我并不感到惊讶......

编辑 2：现在我发现问题仅在 Firefox、 Chrome 和 Opera 中具有正确的映射。

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