认识webpack原理-万物皆可打包

Webpack早已成为前端开发者必备技能之一，本文从webpack的原理、打包流程以及webpack优化进行分析。webpack配置的文章在网上已经数不胜数了，本文就不做阐述啦。有问题的小伙伴欢迎留言指正~

Webpack核心原理:

Webpack把一切都看成模块，当webpack处理应用程序时，根据给定的一个主文件，递归的构建一个关系依赖图。其中包含应用程序须要的每个模块，而后把这些模块打包成一个或多个包。

bundle、chunk、module是什么

• bundle:是由webpack打包出来的文件
• chunk:代码块，一个chunk由多个模块组成，用于代码的合并与切割
• module:是开发中的单个模块，在webpack的世界中，一切皆模块，要给模块对应一个文件，webpack会从配置的entry中递归开始查找出全部依赖的模块

何为loader和plugin

Loader: Webpack把一切文件都视为模块，可是原生的js只能解析js文件，若是其它文件格式也想打包的话就须要用到loader。因此loader的做用是使webpack拥有了加载和解析非javascript的能力。它也能实现对不一样格式的文件处理，好比将scss转换成css、Typescript转换成js。转换这些文件，从而使其可以被添加到依赖图中。

Plugin : 用来扩展webpack的功能，让webpack拥有更多的灵活性。它并非直接操做单个文件，而是直接对整个构建过程起做用。在Webpack运行的生命周期中会广播出许多事件，Plugin 能够监听这些事件，使用自身丰富的Api控制 webpack 打包流程的每一个环节，实现对 webpack 的自定义功能扩展。

区别总结 : loader实现对不一样格式文件的处理，转换这些文件，使其能够被添加到依赖图当中。plugin是用来扩展webpack的功能，不是直接操做文件。它由丰富的自定义api和生命周期事件，从而控制webpack打包流程的每一个环节。这是loader作不到的。

Webpack的构建流程

Webpack的运行过程是个串行的过程，从启动到结束会依次执行如下流程：

1. 初始化参数:从配置文件和shell语句中读取与合并参数，得出最终参数。
2. 开始编译:用获得的参数初始化compiler对象，加载全部配置的插件，执行对象的Run方法开始编译。
3. 肯定入口:根据配置中的entry找出全部入口文件。
4. 编译模块:从入口文件出发，调用全部配置的loader对模块进行翻译，再找出该模块所依赖的模块，再递归本步骤。直到全部入口依赖文件都通过了本步骤的处理。（此处为深度优先遍历）
5. 完成模板编译:使用loader翻译完全部模块后，获得每一个模块被翻译后的最终内容，以及它们之间的依赖关系。
6. 输出资源:根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每一个 Chunk 转换成一个单独的文件加入到输出列表，这步是能够修改输出内容的最后机会。
7. 输出完成：在肯定好输出内容后，根据配置肯定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程当中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，而且插件能够调用 Webpack 提供的 API 改变 Webpack 的运行结果。

如何用webpack来优化前端性能

1. 压缩代码:删除多余代码，注释，简化代码写法等方式。能够利用webpack的uglifyjsplugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css。
2. 利用CDN加速:在构建过程当中，把引用的静态资源路径修改成CDN上的对应路径。能够利用webpack的output参数和loader的publicPath参数来修改资源路径
3. Tree shaking:将代码中永远不会用到的片断删除掉，能够在启动Webpack的时候追加参数--optimize--minimize来实现
4. Code splitting: 将代码按路由或组件进行分块，这样能够作到按需加载，同时能够充分利用浏览器缓存。

小结：

正确理解webpack背后的原理与基本知识，能够帮助咱们更好的使用webpack这一利器。但愿看了本文的盆友能够对webpack能够有个更深刻的认识，使用起来更加驾轻就熟。