WebPack相关文档
WebPack 主要4个核心概念
- Entry
- Output
- Loaders
- Plubins
1) Entry
Entry是某一段代码的入口，这段代码入口会告诉webpack 里面有哪些模块的依赖。
Entry也是打包的入口，告诉webpack,我去哪个文件开始找依赖，然后再去找这些文件依赖的依赖。
Entry可以是单个或多个，为什么 会出现多个入口的情况呢？多个入口可能情况:
- 多页面应用程序，同时存在这个页面是一个入口，另外一个页面是新的一个入口。
- 单页面也可能出现多个entry,有可能我的业务代码是一个entry,剩下框架的代码我也可以放到另一个entry,所以打包的入口并不代表是程序执行的入口。
举粟:
上图 module.exports是commonJs的写法，module.exports是一个对象，这个对象是webpack的配置，里面有一个属性entry,值为index.js,它是一个文件名，其实也可以是一个路径。entry除了是一个路径还可以是一个数组：
那数组表示什么意思呢？
人上面我们知道WebPack可以多个入口,所以数组表示它要创建多个入口。除了这种写法，还有以下的写法:
就是key-value的形式，这种写法是推荐写法，因为 如果用以上两种写法，其实我们并不完全知道webpack在打包过程中这两个叫什么，也没办法去识别它，而用key-value形式，我们看到每个entry都有一个key的，如果上图index.js的key就是index,这个key表示独特的Chunk,就是一个代码块意思。所以当我们是一个对象的时候有什么好处？
如果我们还想添加一个入口，可以按上图这么做，我们在指定一个key就好了，以此类推，这样我们就很清楚的知道，每个文件对应的key。
2) Output (表示输出的文件)
- 打包成的文件(bundle)
- 一个或者多个
- 自定义规则
- 配合CDN
上图，我们有一个entry为index.js,这时候是单个输入配合单个输出，所以我们只要在output中的filename指定输出的名字就可以了，这是单个的情况。
上图，当我们entry为两个的时候，entry里index对应index.js，vendor对应vendor.js,那么这时候我们output里也要对应两个，怎么定义呢？
filename就是上面提到的自定义规则：
-
name表示的是entry的name,比如entry中的index.js，那么index就是entry的name，vendor.js中的vendor就是naem了。
-
hash表示webpack打包过程唯一的标识码，可以理解md5加密后的m5码。
3) Loaders
- 处理文件
- 转化为模块
编译相关
样式相关
4) Plugins
- 参与打包整个过程
- 打包优化和压缩
- 配置编译时的变量
优化相关
功能相关
4) 名词:
Chunk: 在英文里面是块的意思，在webpakc中就是代码块的意思，在webpack打包 默认把这些代码分为一个一个的代码。
愿你成为终身学习者