webpack - mini-css-extract-plugin 中的源映射
问题描述
我似乎无法让源映射与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。
但是没有源映射至少可以告诉我样式来自哪个文件,这很烦人。
解决方案
在写这个问题时,我找到了一个可能的解决方案,它最终奏效了。
我定义devtool
了eval
哪个是最便宜的选择。我不完全明白它是如何工作的,但它不是一个真正的源映射,而是它将整个源代码包装在一个 eval 语句中,并告诉浏览器这是一个对我来说很好的特定文件,但这个策略显然不能使用 css 文件。
我所做的是将 devtool 定义为cheap-source-map
似乎是不依赖 eval 语句的最快选项。
我也认为我完全误解了加载程序的 sourceMap 选项。我只在生成显示原始源代码的完整源映射时才需要它们。(虽然我还没有完全测试过)
推荐阅读
- python - 某些形式是否禁止使用硒?
- php - 在 Mac OSX Mojave 10.14 上安装 pear 的问题
- laravel - 三向数据透视表获取用户所属的所有团队以及每个团队的角色
- bash - 如何在我的 bash 提示符中正确使用两个字符宽的表情符号?
- python - 创建静态列项
- r - R:记录链接问题,所有字段组合在 1 列中
- javascript - 使用带有 React JS 的箭头键递增和递减时获取重复项
- java - Apache HttpClient 5.0 HTTPS 代理:“没有隧道,除非连接”
- c - librdkafka C API Kafka Consumer 无法正确读取所有消息
- docusignapi - 品牌回调网址的签名是什么?