code split

将打包一个chunk文件分成多个文件，可以实现各项功能，实现按需加载。（多个js文件并行加载，速度更快）

方式一：多入口 （不常用）

//多入口，webpack后会生成对应个chunk文件
  entry:{
    index:'./src/js/index.js',
    test:'./src/js/test.js'
  }, 
  output:{
    // [name]:取文件名
    filename:'js/[name][contenthash:10].js',
    path: resolve(__dirname,'bulid'),
    clean:true
  },

方式二：

//webpack.config.js
/*
1、单入口：可以将node_moudle中代码单独打包一个chunk输出
2、多入口：自动分析多入口chunk中，有没有公共文件，如果有会打包成单独一个chunk。
如果在多入口的js文件中都引入了jquery时，不会重复打包，只会打包一个jquery
*/
optimization:{
    splitChunks: {
        chunks: 'all',
    },
},

方式三：单入口 or 多入口+optimization+import动态导入

//index.js

//webpack.config.js单入口，引入index.js
//不在index.js文件使用 import './test'

/*
通过js代码，让某个文件被单独打包成一个chunk
import动态导入语法：能将某个文件单独打包
*/
//webpackChunkName设置打包名字
import(/*webpackChunkName:'test' */'./test').then(({mul,sum}) => {
  console.log(mul(1,2));
  console.log(sum(1,2,3,4));
}).catch(() => {
  console.log('文件加载错误');
})

//test.js
export function mul(a, b) {
  return a * b
}

export function sum(...args) {
  return args.reduce((p, c) => p + c, 0)
}