迷你 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将热模块替换在DEV模式下工作，而mini-css-extract-plugin进行生产。

现在mini-css-extract-plugin支持HMR，这真是太棒了，因为我不必再与Fouc打交道了。

，但是没有源图至少告诉我从哪个文件中来自哪个文件很烦人。

Answer 1

在编写问题时，我找到了一个可能确实有效的解决方案。

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

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

我还认为我完全误解了装载机的Sourcemap选项。我只需要在生成显示原始源代码的完整源地图时它们。(尽管我还没有完全测试(