webpack明明设置好了插件,为什么报错You forgot to add ‘mini-css-extract-plugin‘ plugin或vue-loader was used without

作者在开发过程中遇到webpack5配置文件中vue-loader与mini-css-extract-plugin的冲突问题,通过逐步排除和二分法发现是speed-measure-webpack-plugin引起的。最终禁用该插件解决了问题。
摘要由CSDN通过智能技术生成

问题出现的情况

在开发脚手架的时候,我配置了一个vue环境的webpack5配置文件
遇到了一个奇怪的问题

  • vue-loader总是报错vue-loader was used without the corresponding plugin
  • mini-css-extract-plugin也一直报错You forgot to add ‘mini-css-extract-plugin‘ plugin

我的插件设置的好好的,这种情况依直觉来看很麻烦
去网上查,不管外网内网,果然都是一些普通错误的解决方案,没有我这种情况的

失败的解决方法

我尝试了一些通常的方法,但都没效果

  • 卸载重新安装插件
  • 降低webpack版本
  • 降低插件版本
  • 调整插件顺序
  • 安装辅助插件

这样来看,绝不是插件程序本身特性所导致的问题了,应该是更加麻烦的问题
应该就是源码有什么不为人知又不报错的冲突

最终解决方法

最终,我找到了发生冲突的插件了,就是speed-measure-webpack-plugin这个插件有问题
不使用它,则没有发生奇怪的情况,可以正常运行了

说来惭愧,我懒得溯源,直接大力出奇迹,从最外层的插件一堆一堆的试出来的(二分法很好用)
运气好,一下就找到了问题,一般来说核心的插件功能是不会出错的

最好,还找到了一篇分析到了这个问题的文章:webpack打包的项目中同时使用了css和less文件,加了speed-measure-webpack-plugin后为什么会出现这样的报错?

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果使用 `mini-css-extract-plugin` 插件webpackCSS 打包到一个单独的 CSS 文件中,而 CSS 文件中的 URL 路径发生了错误,一般有两种情况: 1. CSS 中的相对路径错误:在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析,而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader,那么 CSS 文件会被提取到 `output.path` 目录下的某个位置,而不是和 JS 文件同级的位置。因此,你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如: ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // ... output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", }), ], }; ``` 上面的配置中,我们将 CSS 文件提取到 `dist/css` 目录下,并指定了 `publicPath` 参数为 `/`,表示所有静态资源都在根目录下。这样,在 CSS 文件中使用相对路径时,就会相对于 `dist/css` 目录来解析。 2. 图片等资源文件路径错误:如果 CSS 中包含了图片等资源文件,那么这些文件的路径也需要正确解析。一般来说,可以使用 `file-loader` 或 `url-loader` 来处理这些文件,并在 CSS 中使用相对路径来引用它们。例如: ```css /* style.css */ body { background-image: url(../images/bg.jpg); } ``` ```js // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[name].[hash:8].[ext]", }, }, ], }, ], }, }; ``` 上面的配置中,`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL,而大于 8KB 的文件会被转换为单独的文件,并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值