一，什么是webpack

webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

二，webpack的构建流程

1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
3. 确定入口，通过entry找到入口文件
4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
8. 在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在监听感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果。

三，webpack的优势

如今的很多网页有着许多丰富的功能，复杂的JavaScript代码和一大堆依赖包。为了简化代码的复杂度， WebPack有着以下优点：

• 2.1 模块化

• 在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等，只有通过合适的loaders，它们都可以被当做模块被处理。

• 2.2 webpack-pulgins

• 插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。

四，常用plugin

1. ignore-plugin：忽略部分文件
2. html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
3. mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载
4. clean-webpack-plugin: 目录清理
5. uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
6. terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
7. webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
8. HappyPack:HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。因此可以很大程度上优化打包速度。

五，个人总结

Webpack的核心在于它将一切以模块进行划分，使得我们可以进行模块化开发。 使用Webpack可以快速将代码进行压缩打包，方便后续的编译以及使用。