动手写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选项。

动手写webpack配置--5.webpack-dev-server热更新设置_第1张图片

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

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

动手写webpack配置--5.webpack-dev-server热更新设置_第2张图片

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

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

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

 

 

你可能感兴趣的:(前端)