mini-css-extract-plugin 中的源映射答案

【问题标题】：source map's in mini-css-extract-pluginmini-css-extract-plugin 中的源映射
【发布时间】：2019-10-06 18:02:04
【问题描述】：

我似乎无法让源映射与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。

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

【问题讨论】：

标签： webpack webpack-dev-server hot-module-replacement mini-css-extract-plugin

【解决方案1】：

在写这个问题时，我发现了一个可能的解决方案，它最终确实有效。

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

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

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

【讨论】：