Question

我似乎无法使源映射与mini-css-extract-plugin一起使用。我让他们与style-loader合作。

devtool: argv.mode === 'development' ? 'eval' : 'none',

[...]

test: /\.scss$|\.css$/i,
use: [
     {
          loader: MiniCssExtractPlugin.loader,
          options: {sourceMap: argv.mode === 'development', hmr: argv.hot},
     },
     {
         loader: 'css-loader',
         options: {sourceMap: argv.mode === 'development', importLoaders: 1},
     },

[...]

plugins: [
    [...]
    new MiniCssExtractPlugin({
        filename: argv.mode === 'development' ? '[name].css' : '[contenthash].css',
        chunkFilename: argv.mode === 'development' ? '[id].css' : '[contenthash].css',
    }),
]

一些背景信息：我一直使用style-loader来进行热模块更换，以在开发人员模式下工作，而mini-css-extract-plugin用于生产。

现在mini-css-extract-plugin支持hmr，这非常棒，因为我不再需要在开发中处理FOUC。

但是没有源映射至少可以告诉我样式来自哪个文件，这很烦人。

Answer 1

您还必须像这样将MiniCssExtractPlugin.loader添加到规则配置中

rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },

Answer 2

在写这个问题时，我发现了一个可行的解决方案，但最终奏效了。

我将devtool定义为eval，这是最便宜的选择。我不完全了解它是如何工作的，但它不是真正的源地图，而是将整个源包装在一个eval语句中，并告诉浏览器这是一个特定文件，对我来说很好，但是这种策略显然不能使用CSS文件。

我所做的是将devtool定义为cheap-source-map，这似乎是不依赖eval语句的最快选择。

我还认为我完全误解了加载程序的sourceMap选项。仅在生成显示原始源代码的完整源代码映射时才需要它们。（尽管我还没有完全测试过）

mini-css-extract-plugin中的源地图

2 个答案: