升级到webpack5

一、检查当前 Webpack 版本​

在项目根目录运行以下命令确认当前版本：

npm list webpack

若版本低于 5.x，需升级。涉及到webpack版本相关插件可参照步骤二的方式进行升级。

二、​升级核心依赖

1.更新 @vue/cli 及相关插件

升级到支持 Webpack 5 的版本（建议 @vue/cli-service@5.x）

npm install @vue/cli-service@5.0.8 --save-dev
npm install @vue/cli-plugin-babel@5.0.8 @vue/cli-plugin-eslint@5.0.8 --save-dev

2.​升级 Webpack 及配套工具

npm install webpack@5 webpack-cli@4 webpack-dev-server@4 --save-dev
npm install html-webpack-plugin@5 --save-dev  # 确保兼容 Webpack 5

3.​更新 Loader 和插件​

确保所有 Loader 和插件兼容 Webpack 5，常见需升级的包括：

npm install css-loader@6 style-loader@3 --save-dev
npm install sass-loader@10 node-sass@6 --save-dev  # 解决 Node.js 高版本兼容问题
npm install vue-loader@15 --save-dev  # Webpack 5 需 vue-loader@15+

三、调整配置文件

1.修改 vue.config.js

移除或替换废弃属性：

• **删除 stats**​：该属性已从 devServer 移至顶层配置。
• ​**替换 disableHostCheck**​：改用 allowedHosts: 'all'。
• ​**删除 inline**​：该属性在 Webpack 5 中已无效。

​启用持久化缓存​（Webpack 5 内置功能）

module.exports = {configureWebpack: {cache: { type: 'filesystem' },  // 替代 hard-source-webpack-pluginplugins: [new VueLoaderPlugin()  // 确保 vue-loader 插件正确引入]}
};

​替换废弃配置​：

移除 url-loader 和 file-loader，改用 Webpack 5 内置资源模块

module.exports = {chainWebpack: config => {config.module.rule('images').test(/\.(png|jpe?g|gif)$/i).type('asset/resource');  // 替代 file-loader}
};

2.处理 Polyfill 问题

Webpack 5 移除了 Node.js 核心模块的自动 Polyfill（如 path-browserify、crypto-browserify、stream-browserify、process、buffer），需手动添加。

注意 node:fs、node:path、fs、net、tls、module 等报错，需要禁用掉。

npm install buffer process --save

module.exports = {configureWebpack: {resolve: {alias: {'@': resolve('src'),'node:fs': false,'node:path': false,fs: false,path: require.resolve('path-browserify'),crypto: require.resolve('crypto-browserify'),stream: require.resolve('stream-browserify'),buffer: require.resolve('buffer/'),},fallback: {fs: false,net: false,tls: false,module: false,path: require.resolve('path-browserify'),crypto: require.resolve('crypto-browserify'),stream: require.resolve('stream-browserify'),buffer: require.resolve('buffer/'),process: require.resolve('process/browser')}}}
};

3.​更新 Babel 配置

Webpack 5 需要 Babel 7+，确保 babel.config.js 使用最新预设：

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
};

​四、注意事项​

1. ​依赖版本​：确保所有插件（如 html-webpack-plugin、svg-sprite-loader等）升级到支持 Webpack 5 的版本。
2. ​测试验证​：
   • 开发环境运行 npm run dev，检查热更新和代理是否正常。
   • 生产环境运行 npm run build，检查打包文件是否完整。
3. ​回滚方案​：备份 package.json 和 vue.config.js，升级失败时可快速还原。