webpack5 npm run build 遇到 4 个错误 ERROR

一、打包可能文件编写错误，重新验证代码为正确的 webpack4 到 webpack5 的改写： webpack4 到 webpack5 的修改为：

1. package.json 的 dev-server 命令更改： "dev": "webpack serve --config build/webpack.dev.js",
2. 开发、生产环境及公共配置合并命令更改： const { merge } = require('webpack-merge')
3. 默认清空 output.path 文件夹命令更改： const { CleanWebpackPlugin } = require('clean-webpack-plugin')
4. 配置更改： module.rules 中 webpack4 loader: ['xxx-loader'] 换成 webpack5 use: ['xxx-loader']
5. hash 配置更改： filename: 'bundle.[contenthash:8].js' webpack5 h 小写，webpack4 大写 H

二、此时存在4个错误：

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/dist/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 2:0-28 12:13-16

ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (D:\workspaces\codeOrgan\vue-admin\node_modules\vue-loader\dist\index.js:95:34)
@ ./src/main.js 2:0-28 12:13-16

ERROR in Template execution failed: ReferenceError: BASE_URL is not defined

ERROR in   ReferenceError: BASE_URL is not defined

- index.html:11
D:/workspaces/codeOrgan/vue-admin/src/index.html:11:11

- index.html:20 __webpack_modules__.411.module.exports
D:/workspaces/codeOrgan/vue-admin/src/index.html:20:3

- index.js:499
[vue-admin]/[html-webpack-plugin]/index.js:499:16

- task_queues:96 processTicksAndRejections
node:internal/process/task_queues:96:5

- async Promise.all



1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.88.2 compiled with 4 errors in 6533 ms

一一解决：

1. vue-loader 的问题：配置不正确，为旧版本配置；办法：查看官网。

参考链接：# webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

2. vue-loader 的问题：vue-loader 版本太高；办法：stackoverflow：# Vue loader 17.0.0 + Webpack 5.74.0 - Module build failed
   • vue-loader 16+ isn't compatible with vue 2.x
   • The vue-template-compiler / @vue/sfc-compiler has the following API in vue 2.7 (and 2.6):
   • for vue 3, the api changes, and the vue-loader also changes accordingly in 16+:
   • So you need to use vue-loader 15.x
   • experience the same stuff. it's working now when I change the vue-loader version to 15.10.1 

参考链接：# TypeError: Cannot read properties of undefined (reading ‘styles‘)

3. ERROR in Template execution failed: ReferenceError: BASE_URL is not defined
4. ERROR in ReferenceError: BASE_URL is not defined

const webpack = require('webpack')
// ...
    new webpack.DefinePlugin({
      // window.ENV = 'production'
      ENV: JSON.stringify('production'),
      BASE_URL: '"../"' // 定义全局变量BASE_URL
    }),
// ...

参考链接：webpack入门@王打鱼：04.Plugin的使用

三、最后 npm run build webpack 5.88.2 compiled successfully in 6839 ms