webpack5.x 遇到的问题

╰半橙微兮° 2022-12-22 09:25 105阅读 0赞

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

如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center]

**解决：webpack 使用如下**

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

**更新问题2**

问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 1]

**解决：**  
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"

问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 2]  
**解决方案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");`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 3]

**解决方案：**

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 问题`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 4]  
**解决方案：**

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

更多资讯，查询：[optimization][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/93e573732bda41d08863d76fb3924970.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/fabb7ad8f0424ffc90263ffd0d171ad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201119113552589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201119113808524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1,size_16,color_FFFFFF,t_70#pic_center
[copy-webpack-plugin]: https://www.npmjs.com/package/copy-webpack-plugin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201119114058942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1,size_16,color_FFFFFF,t_70#pic_center
[optimization]: https://webpack.docschina.org/configuration/optimization/