动手写webpack配置--5.webpack-dev-server热更新设置

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

上节：https://blog.csdn.net/fengsh998/article/details/88075347查看了api文档中devServer的相关配置。

这节配置下热更新。

设置hot

 开启 Hot Module Replacement （HMR）.即当修改源文件按下ctrl+s 或command+s时会自动打包刷新。

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.

官方中指明，当命令行中加--hot 参数时会自动开启HMR,不需要再在webpack.config.js中配置。

修改package.json

...
  "scripts": {
    "start": "node ./src/index.js",
    "dev": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

执行npm run dev   下成这个效果同样适用于使用webapck.config.js中添加hot:true选项。

扫描二维码关注公众号，回复： 5402247 查看本文章

启动后 ，试着修改App.js中的内容后按command+s就可以看到变化了。

如果使用的是hotOnly,而不是hot，则在修改内容后command+s后，页面并不会刷新，而需要手动进行刷新。

官方对HMR建议使用内连的方式进行处理。

...
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        overlay: true,
        hot: true,
        inline: true
    }
...

好吧，热更新，就这么点东东？超出了我的认知，好吧，先这样，后面实际应用中用到再深入。