webpack打包原理、loader、plugin

[cheny88]

webpack的工作原理/打包原理

webpack是一个模块化打包JS的工具，在webpack中一切文件都是模块，通过定义entry.js对所有依赖的文件进行跟踪，将各个模块通过loader（转换文件）和plugin（注入钩子）处理，然后打包成bundle.js文件，通过代码分割成单元片段并按需加载。

按需加载

打包过程中webpack根据code splitting功能将文件分为多个chunks，还可以将重复的部分单独提取出来作为commonChunk，从而实现按需加载。

什么是bundle？什么是chunk?什么是module?

bundle：是由webpack打包出来的文件
chunk：是一个代码块，一个chunk由多个模块组合而成
module：是开发中的单个模块。
在wenpack中一切都是模块，一个模块对应一个文件，webpack会从配置的entry(入口)中递归开始查找所有模块

什么是Loader?什么是Plugin?

loader： 因为webpack本身只理解JavaScript，所以loader用来解析js以外的东西，用于告诉 Webpack 在遇到哪些文件时使用哪些Loader 去加载和转换打包成js。
常用loader：
css-loader——读取合并CSS 文件、
style-loader——把CSS代码注入到JavaScript中，通过DOM操作去加载CSS、
url-loader——将文件转换为base64的方式、
vue-loader——处理vue文件、
babel-loader——把ES6转换成ES5、
eslint-loader——通过ESLint检查JavaScript代码

plugin： 插件，用来扩展webpack功能，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点,在合适的机会通过webpackt提供的API改变输出结果。
常用Plugin:
define-plugin——定义环境变量
commons-chunk-plugin——提取公共代码
uglifyjs-webpack-plugin——通过UglifyES压缩ES6代码

如何利用webpack来优化前端性能？

1. 压缩代码：压缩JS（利用webpack的UglifyJsPlugin和ParallelUglifyPlugin）、压缩CSS
2. 利用CDN加速：在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
3. 删除死代码：将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
4. 提取公共代码：提取多个页面的公共代码

如何提高webpack的构建速度？

1. 多入口情况下，使用CommonsChunkPlugin来提取公共代码
2. 通过externals配置来提取常用库
3. 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
4. 使用Happypack实现多线程加速编译
5. 使用webpack-uglify-parallel来 提 升uglifyPlugin的 压 缩 速 度 。原 理 上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
6. 使用Tree-shaking和Scope Hoisting来剔除多余代码

webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全。

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

1. 初始化参数：从配置文件和shell语句中读取与合并参数得出最终的参数
2. 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；
3. 确定入口：根据配置中的entry找出所有的入口文件；
4. 编译模块：从入口文件开始，调用所有配置的Loader对模块进行编译，再找出该模块的依赖模块，再递归本步骤直到所有的入口文件都经过本步骤的处理；
5. 完成模块编译：在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。