告别缓慢构建，webpack3.x完美升级4.x

2023-09-27 10:23:07

在vue-cli3发布之前，使用vue-cli2构建的vue项目是基于webpack3.x的，伴随着项目的版本迭代，功能逐渐增多，文件也逐渐增多，打包时间从最初的4.5分钟，最久的时候17分钟。因为使用ts的缘故，每次打包ts-loader都需要去扫描所有的ts文件，再把它们转换成js，在这个过程中，也会进行一些语法检查，这也是比较耗时的。这个过程不仅仅是转换文件，其实它还会去做一些计算，比如说你用到了一些库里的一些模块，那它就会去找到这个库里具体给你用了哪个模块，然后把这个模块合并过来，它做了很多类似这种工作。

webpack4.x做了很多优化，它把各个loader分开，比如说html-loader，js-loader等等，每个loader单独运行，互不干扰，从而加快了构建速度。

webpack4.x还提供了一些新的特性，比如tree shaking，可以帮助我们去除代码中未使用的代码，从而减小打包后的体积。

如何将webpack3.x升级到4.x？

安装webpack4.x

npm install webpack@4.x

修改webpack配置

在webpack.config.js文件中，将webpack的版本号改为4.x，并添加一些新的配置项，比如：

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};