这是我参与「第四届青训营」笔记创作活动的第13天
前言
我们为什么要学习Webpack？因为这“前端工程化”的一部分，如果我们有了这个概念，我们就可以对前端项目进行更加得心应手的处理。
什么是Webpack
我们的网站一定会有无数个不同种类的文件，如果我们手动去管理的话一定很麻烦，并且很容易出问题。这个时候我们需要一个工具能够把所有的这些资源打包起来。这个时候Webpack出现了。他能够把多份资源文件打包成一个Bundle，而且可以模块化处理很多的资源文件等。
处理流程
Webpack的处理流程大概分为这几步：入口处理：从entry文件开始启动；依赖解析：根据require或者import等语句找到依赖资源；然后是资源解析：根据module配置，调用资源转移器，将非标准js资源转译为js内容；还有资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。
使用Webpack
只要像我们之前安装Vue那样来安装Webpack就可以了捏。然后使用的时候其实主要围绕的就是“配置”：配置大约可以分为流程类和工具类。
流程类的配置的处理流程和之前差不多，都是需要经过entry、resolve、module和target等几个部分。工具类配置又可以细分为开发效率类、性能优化类、日志类等。我们也可以用它来处理CSS、接入Babel、生成HTML等操作。它还具有HMR、Tree-Shaking等高级操作。
理解Loader
因为Webpack只认JS，不好处理非标准JS资源，所以这时候就需要Loader来完成这些工作。loader分为less-loader、css-loader和style-loader。
理解插件
就和vscode等工具一样，Webpack本身也是基于插件做的，所以说没有插件就没有Webpack。如果我们想要深入理解插件的话，就可以试着自己编写一个。
总结
总而言之，目前市面上的框架有很多，我们在选择的时候可以选择最适合自己的那个就可以了。