webpack

1.webpack

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

2.如何优化webpack配置

1、缩小文件查找范围
2、优化loader
3、优化resolve.modules
4、优化resolve.mainFields
5、优化resolve.alias
6、优化resolve.extensions
7、优化module.noPaese

使用DllPlugin
1、基础模块抽离，打包到动态链接库
2、需要使用模块，直接去动态链接库查找

大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码

使用HappyPack
单线程变多进程

使用ParallelUglifyPlugin
开启多进程压缩代码，并行执行

3.Tree Shaking原理

webpack仅仅是通过注释来标识，该模块未使用，要想真正移除，还需要依赖uglifyJs。

要尽量使用esm，因为tree-shaking不支持动态导入
esm要写在顶层，ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析。

4.代码分割原理

方式：
1、entry配置。入口就是一个chunk
2、动态加载import(),也是一个chunk
会把import().then的代码换成__webpack_require__.e().then(__webpack_require__.t())
3、抽取公共代码，也会提取出一个chunk

5.懒加载原理

1、遇到import后会单独打包到一个代码块中，单独生成一个文件
2、首次只会加载入口文件，当执行到import语句时，new一个promise，缓存resolve方法。
3、会发出一个jsonp请求去请求分割的异步代码。加载成功后会执行刚缓存的resolve方法
4、请求完成后会合并到原来的modules中，然后去执行webpack_require加载新的模块，并且把模块的exports语句向后传递

6.提取公共代码原理

webpack会根据配置项，根据esm来提取公共代码。添加到新的chunk中。

7.热更新原理

服务端：
1、启动webpack-dev-server服务器
2、创建webpack实例
3、创建Server服务器
4、添加webpack和done事件回调，在编译完成后会向浏览器发送消息
5、创建express应用app
6、使用监控模式开始启动webpack编译，在watch模式下，文件系统是某一个文件发生改变都会被webpack监听到。根据配置文件对模块重新编译打包，并将打包后的代码通过简单的js对象保存在内存中
7、设置文件系统为内存文件系统（为了dev时更快）
8、添加webpack-dev-middleware中间件（中间件负责返回生成的文件）
9、创建http服务器并启动服务
10、使用sockjs在浏览器端和服务器之间建立websocket长连接，将webpack重新编译打包的信息告诉浏览器端，（如果是热更新其中会包含此次打包和上次有哪些chunk和模块发生了变化，以及此次打包的hash值。）浏览器端根据hash来判断是否需要重新请求文件。（每次打包后都会有state对象，对象中都会有hash值）

客户端：
1、webpack-dev-server/client-src/default/index.js端会监听到此hash消息，并保存此hash
2、客户端在收到ok的消息后会执行reloadApp进行更新
3、在reloadApp中会进行判断，是否支持热更新，如果支持就emit webpackHotUpdate事件，如果不支持直接刷新。
4、在webpack/hot/dev-server.js会监听ebpackHotUpdate事件，然后执行check()方法进行检查，check()方法中会调用module.hot.check方法
5、它通过调用JsonpMainTemplate.runtime的hotDownloadMainfest方法，向server端发送Ajax请求，服务端返回一个Mainfest文件，该文件包含了所有要更新的模块的hash值和chunk名。（去问服务器这次有哪些文件发生了变化）
6、调用JsonpMainTemplate.runtime的hotDownloadChunk方法，向server端发送Jsonp请求获取最新的模块代码。
7、请求回来后会调用JsonpMainTemplate.runtime的webpackHotUpdate方法，里面会调用hotAddUpdateChunk，其中会用新的模块替换掉老的模块。
8、然后调用hotApply方法进行热更新

1.每个模块的热更新回调都需要自己写，vue中是vue-loader已经做了
2.使用jsonp是为了请求回来代码直接执行

8.prefetch预加载原理

用法：在懒加载import()中添加/webpackPrefetch:true/
原理：只要添加/webpackPrefetch:true/，就会在打包过程中添加link标签到头部。
例如: <link rel='prefetch' href='xxx.com'>
link 标签还有其他用法，比如：<link rel='dns-prefetch' href='//xxx.com'>

9.sourcemap原理

webpack打包会生成.map文件。其中会有编码来标记和源码对应的行和列，从而能够找到

10.Scope Hoisting

webpack4中通过webpack.optimize.ModuleConcatenationPlugin()来开启scope hoisting。

正常的是webpack会把各个模块分开，通过webpack_require导入。但是如果使用scope hoisting会把需要导入的文件直接移入顶部，这就是所谓的hoisting
优点：
1、代码量减少
2、不需要多次使用webpack_require调用模块，运行速度增加。

如果使用非ES6模块或者使用异步import()时，不会应用作用域提升，和tree shaking一样，因为esm是静态分析的，能够在编译期间就知道哪个模块被使用了