webpack性能优化详解，你想知道的webpack都在这里

Webpack性能优化

对于webpack，人们通常一年只接触两次，剩下的时间就“只管用”了。

webpack是什么？

webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

通俗理解：首先webpack会有一个入口文件，比如index.js文件，在这个文件当中会引入很多资源，比如说css/less/图片/字体等等其他资源，这个时候index.js文件中会记录这些资源，依赖形成一棵树状结构图，就是我们在项目当中引入的文件，引入的这些文件会形成一个chunk，就是所谓的代码块。这些chunk经过处理，也就是less编译成css等，高级语法处理成低级语法，这样一个过程就是打包，打包之后会形成一个文件或多个文件，就是bundle。 

静态模块？在入口文件中，比如index.js文件中，引入了sass文件，less文件等，其实这些就是静态模块，每个文件都可以看做是一个模块。

打包？将静态模块引入文件之后形成代码块，然后做处理--less编译为css等，这个过程叫做打包。

依赖图？每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。

webpack打包流程：

webpack可以把不同模块的文件进行打包，并且保证它们的引用正确，执行有序。

首先读取webpack的配置参数，启动webpack创建Compiler对象并开始解析项目，会根据entry找到打包的入口文件将其进行编译，最终生成依赖关系树，
webpack默认只认识js文件，所以当打包文件中存在非js文件时，需要引入loader进行解析，loader的解析是从上往下，从右往左（style-loader(css-loader(less-loader(content)))）进行的，比如vue文件需要使用vue-loader、scss文件需要使用scss-loader、css-loader、style-loader等让webpack最终能够认识它们并解析，
在webpack打包的构成中会通过发布订阅模式抛出一些hooks，我们可以使用plugins去监听这些hooks，在做对应的功能扩展，比如使用CopyWebpackPlugin将静态资源文件赋值到dist下面，按需引入、代码压缩（UglifyJsPlugin）、热加载（HotModuleReplacementWebpack）、一些错误提示（friendlyErrorsWebpack）等。
webpack终于会根据output确定打包的出口目录、文件格式（hash）。

参考：https://mp.weixin.qq.com/s/bsZ3WcGFdYrGi0jXbhYl2A

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

1. 初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

2. 开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译；

3. 确定入口 根据配置中的 Entry 找出所有入口文件；

4. 编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

5. 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系；

6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会；

7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。

plugin插件

• 是一个独立的模块

• 模块对外