webpack5.x 遇到的问题

更新问题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