webpack打包vue（4）plugins optimization

(一)plugins

webpack各种插件都放在这里

大概有：clean-webpack-plugin,用于每次打包前清除之前打包的文件
copy-webpack-plugin,把一些不需要打包的内容直接复制到打包好的文件夹中
html-webpack-plugin,html模板插件 mini-css-extract-plugin,用于抽离css

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "static"),
        to: path.resolve(__dirname, "dist/static"),
      }
    ]),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'static/css/[hash:8][name].css'   // 指定打包后的css
    }),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html"),
      filename: "index.html",
      chunks: ["app", "vendor", "utils"]
    }),
    new CleanWebpackPlugin(),

(二)optimization 优化

// 提取公共代码
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {   // 抽离第三方插件
          test: /node_modules/,   // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'vendor',  // 打包后的文件名，任意命名    
          // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
          priority: 10
        },
        utils: { // 抽离自己写的公共代码，utils这个名字可以随意起
          chunks: 'initial',
          name: 'utils',  // 任意命名
          minSize: 0    // 只要超出0字节就生成一个新包
        }
      }
    }
  },

大概的配置是这样，有需要可以修改配置， 到这整个webpack配置vue开发环境已经完成