# 热更新HotModuleReplacement
目的:提升开发时(开发模式)的效率
# 为什么
针对开发模式
开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。
所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。
# 是什么
HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。
# 提示⭐
如果你碰到了问题,请将路由导航至 /webpack-dev-server
将会为你展示服务文件的位置。例如: http://localhost:9000/webpack-dev-server
。
# 怎么用
# 安装
需要提前安装 webpack 依赖模块
webpack-dev-server
1
# 基本配置
module.exports = {
// 其他省略
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启HMR功能(只能用于开发环境,生产环境不需要了)
},
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
注意此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。 !!!但是 js 还不行。!!!
不同 JS 框架的文件 项目的 热更新有自己单独的 loader 处理器
比如:vue-loader (opens new window), react-hot-loader (opens new window)
但是你若是不信邪,可以试试更改JS文件看看项目在浏览器是否全局更新,还是页面更新
当然在不安装 vue-loader / react-hot-loader的情况下,你也可以这样做,来实现JS热更新,只不过有些麻烦就是了
// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 判断是否支持HMR功能
if (module.hot) {
module.hot.accept("./js/count.js", function (count) {
const result1 = count(2, 1);
console.log(result1);
});
module.hot.accept("./js/sum.js", function (sum) {
const result2 = sum(1, 2, 3, 4);
console.log(result2);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
上面这样写会很麻烦,所以实际开发我们会使用其他 loader 来解决。