Question

我无法使我的Webpack发出CSS源地图。我已经将sourcemap设置为：在任何可能的地方都正确，并且没有任何影响，并且所有在线解决方案都建议使用此插件或其他插件配置，但是我没有任何其他插件，它是超级简单的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或节点进行任何更改的情况下，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'
        })
    ]
};

Webpack不会发出CSS Sourcemap（带有sourcemap：true）

1 个答案: