基于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选项。
启动后 ,试着修改App.js中的内容后按command+s就可以看到变化了。
如果使用的是hotOnly,而不是hot,则在修改内容后command+s后,页面并不会刷新,而需要手动进行刷新。
官方对HMR建议使用内连的方式进行处理。
...
devServer: {
contentBase: path.join(__dirname, "dist"),
overlay: true,
hot: true,
inline: true
}
...
好吧,热更新,就这么点东东?超出了我的认知,好吧,先这样,后面实际应用中用到再深入。