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 文件