【webpack】中splitChunk的使用方法

2019-08-09 23:06:05 阅读：295 来源： 互联网

标签：node react splitChunks initial modules priority webpack splitChunk 方法

适合在多入口打包中使用

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  optimization: {
    // async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
    splitChunks: {
      chunks: 'initial'
    }
  }
}

a入口和b入口都引入了jquery，打包时也分别打包到了各自的模块里面，那么我们可以把相同的模块提取出来

还有一些参数，看到那个vendors单词没，默认在这里设置的

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

尝试改成其他名字

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        common: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

出来的是这样的

可以定义很多个规则

比如我们想react和react-dom打一个包，vue和vuex打一个包

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vue: {
          test: /[\\/]node_modules[\\/](react|react-dom)/,
          priority: -1
        },
        react: {
          test: /[\\/]node_modules[\\/](vue|vuex)/,
          priority: -2
        }
      }
    }
  },

默认引入的node_modules提取的的公共文件叫做vendors命名

可以自定义处理不同模块，要写priority，默认是-10，按照数字大的处理。

标签：node,react,splitChunks,initial,modules,priority,webpack,splitChunk,方法
来源： https://www.cnblogs.com/wuxianqiang/p/11329987.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【webpack】中splitChunk的使用方法