webpack热更新报错:Refused to apply style from ‘http://127.0.0.1:9000/main.8b0a1621.css‘ because its MIME

webpack热更新无效

打开控制台一看,报了下面的错:
在这里插入图片描述

原来是无法访问到打包后的样式资源,测试后纯js是可以热更新的。

网上搜了很多答案,绝大部分都是路径问题,但实际上我这不是路径问题,点击链接可以在控制台的来源中访问到样式资源:
在这里插入图片描述
后面我怀疑是我的css相关loader有问题,结果一看,果然如此:

            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },

我这里用的是MiniCSSExtractPlugin.loader来代替style-loader的,而MiniCSSExtractPlugin是不支持HRM热更新的,需要手动刷新

将MiniCSSExtractPlugin.loader改回style-loader即可。

最后感谢这位博主的文章,让我知道问题所在:
style-loader、mini-css-extract-plugin的区别

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值