webpack单独生成chunk的方法

这里记录一下我所知道的可以生成chunk的方法
1.多入口

  // 多入口：有一个入口，最终输出就有一个bundle
  entry: {
    main: './src/js/index.js',
    test: './src/js/test.js'
  },

2.optimization

  /**
   * 可以将node_modules中代码单独打包成一个chunk最终输出 
   * 自动分析多入口chunk中，有没有公共的文件。如果有，就会把公共的文件打包成一个单独的chunk
   */
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },

3.import()

/**
 * 通过js代码，让某个文件被单独打包成一个chunk
 * import动态导入语法：能将某个文件单独打包
 * 如果webpackChunkName一样，就会被放进一个chunk
 */
import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // eslint-disable-next-line
    console.log(mul(2, 3), count(5, 3));
    // eslint-disable-next-line
    console.log('文件加载成功');
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败');
  })