Webpack高级 12 -- HMR(开发模式)

48 阅读1分钟

HotModuleReplacement

提高打包速度!!!!

1 . why ?

开发时,我们修改了其中一个模块代码,Webpack就会默认将所有模块全部重新打包编译,速度很慢。

HotModuleReplacement 可以做到,只重新打包编译我们进行修改的模块,其他模块不变!!!

2 . 是什么?

在程序运行中,替换、添加或者删除模块,而无需重新加载整个页面。

3 . 怎么用?

css模块默认以及开启HMR,如下:

1067.png

js模块需要手动配置:

1068.png

但如果我们使用 react 或者 vue 搭建项目,可以用相应的loader:

  • vue-loader
  • react-hot-loader