Webpack 本质上是一个现代 Javascript 应用程序的静态模块打包工具。
初始化参数
:webpack 将命令行里的参数和配置文件里的参数进行合并,获得最终的参数;开始编译
:webpack 根据上一步获得的参数,初始化 Compiler 对象,然后调用 Compiler 的 run 方法开始编译;确定入口
:根据配置里的 entry
找出所有的入口文件;编译模块
:从入口文件开始,调用所有loader将文件翻译成 compliation
, 然后递归的编译所有依赖的模块,最终得到所有模块的翻译后的内容和它们的依赖关系;输出资源
:根据所有模块的依赖关系,生成一个个包含多个模块的 chunk
, 然后将 chunk 转换成单个文件,加入输出列表。此外,这是可以修改输出内容的最后机会;输出完成
:确定好输出内容后,根据配置好的输出目录和文件名,将内容写入文件系统。Webpack 的 HMR 可以在程序运行时,完成模块的增加、删除、更新,而不用刷新浏览器。
在 webpack.config.js 里修改配置, devServer.hot
设为 true
:
// webpack.config.js
devServer: {
contentBase: './dist',
hot: true,
}
webpack-dev-server
启动时加上 --watch
参数。
WDS
) 通过和 Webpack 之间的接口, 调用 webpack 暴露的API对代码进行监控,并告诉 webpack, 将代码打包到内存中;devServer.watchContentBase
的话,静态文件被修改后,浏览器就会启动重载。webpack/hot/dev-server
,webpack/hot/dev-server 根据传过来的信息和配置文件,决定是重载浏览器还是热更新;HotModuleReplacement.runtime
(以下简称HMR runtime
)接收到 webpack/hot/dev-server
发送的编译打包的hash值,通过 JsonpMainTemplate Runtime
向 server 端发送 Ajax 请求,获得一个包含要更新模块 hash 的 json 文件,获取到更新列表后,再通过 Jsonp 请求获取到最新模块代码;HMR runtime
对新旧模块做对比,决定是否要热更新。在决定热更新之后,检查模块的依赖关系,更新模块以及模块间的依赖引用;总的来说,热更新就是浏览器端和服务端维护了一个 websocket, 服务端监测到文件的修改和更新之后,向浏览器端推送包含模块构建的 hash 的更新消息,浏览器端接收到消息后和上一次的hash做对比,如果有差异,就通过HMR runtime 发送 ajax 请求获得新构建的文件列表和 hash,浏览器接着根据这些内容再向服务端发起 jsonp 请求获得 chunk 的增量更新,最终由 HotModuleReplacelugin 来对更新的模块和引用依赖进行更新;