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

Posted

技术标签:

【中文标题】mini-css-extract-plugin 中的源映射【英文标题】:source map's in mini-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。

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

【问题讨论】:

【参考方案1】:

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

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

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

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

【讨论】:

以上是关于mini-css-extract-plugin 中的源映射的主要内容,如果未能解决你的问题,请参考以下文章

插件 mini-css-extract-plugin 使用的详解(二)

在 webpack 中使用 mini-css-extract-plugin 输出 2 个(或更多).css 文件

mini-css-extract-plugin 模块的 chunkFilename 的用途是啥?

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

mini-css-extract-plugin

如何避免警告:块样式 [mini-css-extract-plugin] GatsbyJS 中的冲突顺序?