webpack4 optimization配置

最新推荐文章于 2024-07-01 23:45:00 发布

柏灿

最新推荐文章于 2024-07-01 23:45:00 发布

阅读量1.7w

点赞数

分类专栏：前端 VUE JS html 文章标签： webpack4 optimization

JS 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分，下面的代码即是optimize.splitChunks 中的一些配置参考

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: true, // [new UglifyJsPlugin({...})]
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }
}