Webpack中的Chunk和Bundle

之前容易把Chunk和Bundle弄混 ，chunk是打包过程中的代码块 ， 是一堆module的集合 ； bundle是打包完成生成的代码 。

在entry入口中配置的入口文件有三种类型 :

1. 单个文件 ： 只会产生一个chunk

2. 数组格式 ： 也只会产生一个chunk ， 会把数组中所有的所有的源码都打包到一个chunk里 ， 最终只生成一个bundle文件

3. 对象格式 ： 一个属性名对应一个入口文件 ， 就会生成多个chunk ， 在outputPath中 filename就需要写

	output: {
              // path: __dirname + "/public",
              // filename:'bundle.js'
              // 以上2行会报错 

              path: __dirname + "/public",//打包后的文件存放的地方
              filename: "[name].js", //打包后输出文件的文件名
	}

对象中一个字段就会产生一个Chunk，所以在output中filename直接写死名称，会报错。因为上面的配置，产生了两个Chunk，最终会生成两个Bundle，一个名称肯定不够用了。需要用[name]变量来利用entry下的字段名称，作为生成Bundle们的名称。
这里面entry的key，也被用来当作它对应的Chunk的名称，上面传递一个字符串和传递数组两种方式，没有key，也会默认给生成的Chunk一个main的名称。

异步加载生成Chunk

除了入口文件会影响Chunk ， 异步加载的模块也需要生成chunk

{
    entry: {
        "index": "pages/index.jsx"
    },
    output: {
         filename: "[name].min.js",
        chunkFilename: "[name].min.js"
    }
}
const myModel = r => require.ensure([], () => r(require('./myVue.vue')), 'myModel')

剩下还有一些关于webpack和Chunk内容 ， 以后学习再补充。。。