-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
webpack 系列三:优化开发体验 #64
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
在开发过程中,修改代码是最常见的事情,我们不可能每次修改代码都去重新打包,刷新浏览器,所以需要配置一套自动化的解决方案,每次修改代码,都能自动化的重新打包(或增量打包),刷新浏览器。
一、使用自动刷新
1. 步骤一:监听文件变更
有两种方式:
方式一:
在配置文件
webpack.config.js
中设置watch: true
方式二:
在执行启动 Webpack 命令时,带上
--watch
参数,完整命令是webpack --watch
2. 步骤二:控制浏览器自动刷新
方式一:webpack-dev-server
在使用 webpack-dev-server 模块去启动 webpack 模块时,webpack 模块的监听模式默认会被开启。 webpack 模块会在文件发生变化时告诉 webpack-dev-server 模块。
devServer 默认(默认开启 devServer.inline )采用往开发的网页中注入代理客户端代码,通过代理客户端去刷新整个页面的原理实现网页的自动刷新。但它会向每一个 Chunk 包都注入一个代理服务器,当项目需要输出的 Chunk 有很多个时,这会导致构建缓慢,所以,另一方面:
我们可以关闭 inline 模式,只注入一个代理客户端,此时,devServer 会采用将开发的网页装进一个 iframe 中,通过刷新 iframe 去看到最新效果的原理实现网页的自动刷新。
方式二:koa + webpack-dev-middleware + webpack-hot-middleware 前后端同构
https://segmentfault.com/a/1190000004883199
二、开启模块热替换
通过前面的介绍,项目每次更新代码,都会刷新整个网页,需要开发人员等待网页刷新,反应不灵敏,那么如何实现在不刷新整个网页的情况下做到超灵敏的实时预览。
模块热替换与自动刷新
它同样有两种配置方式:
webpack-dev-server —hot
在配置文件
webpack.config.js
中:Webpack 为了让使用者在使用了模块热替换功能时能灵活地控制老模块被替换时的逻辑,可以在源码中定义一些代码去做相应的处理。所以你需要配置入口文件:
当子模块发生更新时,更新事件会一层层往上传递,也就是从
AppComponent.js
文件传递到main.js
文件, 直到有某层的文件接受了当前变化的模块,也就是main.js
文件中定义的module.hot.accept(['./AppComponent'], callback)
, 这时就会调用callback
函数去执行自定义逻辑。如果事件一直往上抛到最外层都没有文件接受它,就会直接刷新网页。那为什么没有地方接受过
.css
文件,但是修改所有的.css
文件都会触发模块热替换呢? 原因在于style-loader
会注入用于接受 CSS 的代码。关闭默认的 inline 模式手动注入代理客户端的优化方法不能用于在使用模块热替换的情况下, 原因在于模块热替换的运行依赖在每个 Chunk 中都包含代理客户端的代码。
The text was updated successfully, but these errors were encountered: