17-webpack-热更新——浏览器不刷新,更新打包后的结果
- 实现浏览器不刷新,更新打包后的结果,默认对js不生效,对样式生效。
https://www.webpackjs.com/guides/hot-module-replacement/#启用-hmr
第一步:webpack.config.js中配置文件服务器即可
+ const webpack = require('webpack');
module.exports = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'
},
devtool: 'inline-source-map',
//服务器配置
devServer: {
contentBase: './dist',
+ hot: true //2.开启热更新
},
//插件配置
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: '模块热替换'
}),
+ new webpack.HotModuleReplacementPlugin() //1.热更新模块配置
],
第三步:命令行运行代码,打包
npm run serve
打包成功后,打开网页
第四步:修改文件代码后,观看页面刷新按钮,验证热更新效果