其他分享
首页 > 其他分享> > webpack配置

webpack配置

作者:互联网

entry入口
一般使用1和3会比较多,2方式在HMR热加载时使用比较多
在这里插入图片描述
output输出
在这里插入图片描述
module配置
在这里插入图片描述
resolve
在这里插入图片描述
devServer配置
在这里插入图片描述
在这里插入图片描述
optimization
在这里插入图片描述

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 仅提取按需载入的module
      minSize: 30000, // 提取出的新chunk在两次压缩(打包压缩和服务器压缩)之前要大于30kb
      maxSize: 0, // 提取出的新chunk在两次压缩之前要小于多少kb,默认为0,即不做限制
      minChunks: 1, // 被提取的chunk最少需要被多少chunks共同引入
      maxAsyncRequests: 5, // 最大按需载入chunks提取数
      maxInitialRequests: 3, // 最大初始同步chunks提取数
      automaticNameDelimiter: '~', // 默认的命名规则(使用~进行连接)
      name: true,
      cacheGroups: { // 缓存组配置,默认有vendors和default
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配需拆分chunk的目录
          priority: -10 // 拆分优先级
        },
        default: {
          minChunks: 2, // 覆盖外层minChunks,用于提取被引用指定次数的公共模块,这里默认2次
          priority: -20,
          reuseExistingChunk: true // 是否重用已存在的chunk
        }
      }
    }
  }
}

标签:提取,chunk,配置,module,webpack,默认,chunks,minChunks
来源: https://blog.csdn.net/wms_swag/article/details/119155246