版权声明：本文章可转载，转载请注明本文地址，谢谢~ https://blog.csdn.net/weixin_43307658/article/details/87801860
欢迎访问我的博客https://qqqww.com/，祝各位码农同胞们早日迎娶白富美，走上人生巅峰~~~
1 前言
今天面试遇到了一个问题，先问的是怎么理解webpack的，我答了webpack的主要作用与主要原理，然后问我怎样优化webpack的打包速度，一时半会没想起来，就说我暂时没考虑到这个，后来回来想想，其实我的项目里用到了一个热更新，其作用就是不回重新生成bundle.js，而是以补丁的形式更新，这不就是意味着需要打包的的内容会被减，不就是提高了打包速度嘛，
2 怎么优化webpack打包速度
这里讲我在项目利用到的，在package.json中的dev配置的时候，配置加上--hot即可
3 有些其他方法
移步https://www.cnblogs.com/imwtr/p/7801973.html
4 对webpack的理解
由于webpack很强大，所以对webpack每个人有不同的理解，可能说出来又要长篇大论，但我对webpack目前的掌握只能说是了解吧，所以先大致总结下，以后还需要慢慢学习
5 对webpack了解哪些
- webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化
- WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
- 官网的图片形象的展示了webpack的定义
6 webpack的打包原理
- webpack中每个模块有一个唯一的id，是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的内容，并按照require的顺序排列
- 我们看到_webpack_require是模块加载函数，接收模块id（对，webpack中每个模块都会有一个独一无二的id，其实也就是在IIFE传参数组中的索引值（0，1，2…）
- a依赖b，所以在a中调用webpack加载模块的函数
7 webpack的构建流程
- 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
- 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
- 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归。
- 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
- 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
- 输出所有chunk到文件系统。