webpack学习之路之webpack核心概念

WebPack相关文档

webpack官网

webpack中文官网

webpack github地址

webpack 版本差异及修复bug

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

• 参与打包整个过程
• 打包优化和压缩
• 配置编译时的变量

优化相关

CommonsChunkPlugin:用来提取不同的Chunk之间相同代码。

功能相关

4) 名词:

Chunk: 在英文里面是块的意思，在webpakc中就是代码块的意思，在webpack打包 默认把这些代码分为一个一个的代码。

愿你成为终身学习者