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

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

在写这个问题的时候，我找到了一个可能的解决方案，并最终成功了。

我将devtool定义为eval，这是最便宜的选项。我不完全明白它是如何工作的，但它不是一个真正的源码映射，而是它将整个源码封装在一个eval语句中，并告诉浏览器这是一个特定的文件，这对我来说没问题，但这种策略显然不适用于css文件。

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

我还认为我完全误解了装载器的sourceMap选项。我只需要他们时，生成一个完整的源代码地图，显示原始的源代码。(尽管我还没有完全测试过它)