javascript - Webpack 不发出 css sourcemap(带有 sourcemap : true)

Question

我无法让我的 webpack 发出 css sourcemap。我把 sourcemap: true 放在任何可能的地方，但没有效果，所有在线解决方案都建议这个或其他一些插件配置，但我没有任何其他插件，它是 super 简单的 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，生产模式需要在HTML文档中添加custom.min.css。

编辑:不幸的是，这也可能是错误的。现在没有对 webpack 或节点进行任何更改，sourcemap 没有生成 :/有时有效，有时无效。 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'
        })
    ]
};