webpack5.x 遇到的问题

最新推荐文章于 2024-10-27 12:03:19 发布

Rkatsiteli

最新推荐文章于 2024-10-27 12:03:19 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_16559905/article/details/109806093

Webpack 专栏收录该内容

10 篇文章

订阅专栏

更新问题1

异常：Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays (at clonedRuleSet-2[0].rules[0].loader: style-loader!css-loader!less-loader

如下图所示
在这里插入图片描述

解决：webpack 使用如下

{
    test: /\.(css|less)$/,
    use: ["style-loader", "css-loader", "less-loader"],
 },

更新问题2

问题：
在这里插入图片描述

解决：
1、VueLoaderPlugin 的导入方式改变了，必须安装 vue-loader@16.0.0-rc.1 版本或更高
2、vue-template-compiler 截止2020-11-17日没有了，新增了 @vue/compiler-sfc

更新问题3
使用webpack5，如下配置出现的问题

"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"

问题：
在这里插入图片描述
解决方案1：
由于webpack-cli版本4，删除了webpack-cli/bin/config-yargs文件，bin目录下没有config-yargs.js，所以安装如下：

npm install webpack-cli@3.3
//or
npm install webpack-cli@3.3.10

解决方案2：
package.json 配置启动入口

"dev": "webpack serve --mode development --env development"

更新问题4
webpack使用CopyWebpackPlugin插件一直报错，采用的版本是"copy-webpack-plugin": "^6.3.1",

使用 const CopyWebpackPlugin = require("copy-webpack-plugin");

在这里插入图片描述

解决方案：

const CopyPlugin = require("copy-webpack-plugin");
 
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "source", to: "dest" },
        { from: "other", to: "public" },
      ],
    }),
  ],
};

参考资料见：copy-webpack-plugin

更新问题5 webpack-cli 问题

在这里插入图片描述
解决方案：

optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
}

更多资讯，查询：optimization