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

最新推荐文章于 2024-05-18 20:26:23 发布

原创最新推荐文章于 2024-05-18 20:26:23 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

Webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何解决Webpack热更新失效的问题。通过排查发现是由于使用了MiniCSSExtractPlugin导致的，该插件不支持热更新功能。最终通过将MiniCSSExtractPlugin替换为style-loader解决了问题。

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的区别