Vue + Vue-Cli-Service 升级至 Webpack 5 详细指南（上）

2024-02-01 12:11:54

背景与概览

技术栈的不断演进推动着前端开发领域不断更新迭代。其中，构建工具 Webpack 和脚手架 Vue-Cli-Service 一直扮演着至关重要的角色。随着 Webpack 5 的发布，迫切需要进行升级以享受其带来的诸多优势。本文将分两部分详细介绍 Vue + Vue-Cli-Service 升级至 Webpack 5 的过程和注意事项，为开发者提供一份实用的升级指南。

Webpack 5 的优势

Webpack 5 相较于前代带来了多项重大改进，包括：

速度提升： 编译速度大幅提升，尤其是大型项目。
代码分割优化： 改进了代码分割，减少冗余代码，提高加载性能。
树摇动增强： 加强了对未使用的代码的摇树，进一步减小包大小。
新特性支持： 支持最新 ES 规范和浏览器 API。
性能分析： 提供了详细的性能分析，帮助识别瓶颈。

升级步骤

1. 安装 Webpack 5 和相关依赖

npm install webpack@5 webpack-cli@4

2. 更新 Vue-Cli-Service

使用以下命令：

vue upgrade

3. 更新 webpack 配置

在 vue.config.js 中添加以下内容：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            name: 'commons',
            chunks: 'initial',
            minChunks: 2
          }
        }
      }
    }
  }
}

4. 更新 loaders 和 plugins

npm install --save-dev css-loader sass-loader style-loader vue-loader
npm install --save-dev clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin optimization-webpack-plugin

更新 webpack.config.js 文件：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new OptimizationPlugin()
  ]
}