升级到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-plugin
    plugins: [
      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，升级失败时可快速还原。