【Webpack基础】认识HMR热更新

yarn run build 会生成打包文件

yarn run dev 不会&＃xff0c;它放到内存里了&＃xff0c;以此来提升打包速度

1.1 状态丢失

每次修改都会重新刷新&＃xff0c;input输入的内容&＃xff0c;临时定义的变量都会丢失

此时就可以借助 HMR 热更新 来解决 状态丢失 的问题

1.2 基本使用

1. 配置

   const path &＃61; require(&＃39;path&＃39;);// 第二步&＃xff1a;引入 webpack 插件
const webpack &＃61; require(&＃39;webpack&＃39;);const HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;);
const { CleanWebpackPlugin } &＃61; require(&＃39;clean-webpack-plugin&＃39;);module.exports &＃61; {mode: "development",entry: &＃39;./src/index.js&＃39;,devtool: &＃39;cheap-module-eval-source-map&＃39;,devServer: {contentBase: &＃39;./dist&＃39;,open: true,hot: true, // 第一步&＃xff1a;配置 devServer 的 hot 属性为 trueproxy: {&＃39;/my&＃39;: {target: &＃39;https://api-hmugo-web.itheima.net&＃39;,secure: false,changeOrigin: true,pathRewrite: {&＃39;^/my&＃39;: &＃39;&＃39;}}}},module: {rules: [{test: /\.css$/,use: ["style-loader","css-loader","postcss-loader",],}],},plugins: [new HtmlWebpackPlugin({template: &＃39;./src/index.html&＃39;}),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin() // 第三步&＃xff1a;实例化插件 webpack.HotModuleReplacementPlugin],output: {filename: &＃39;[name].js&＃39;,path: path.resolve(__dirname, &＃39;dist&＃39;)}
}


   提示&＃xff1a;配置文件修改了需要重启才会生效

2. 打包 yarn run dev

   打包后提示这个说明热更新已经开启了

   
   

此时修改就不会重新刷新页面&＃xff0c;通过右下角 network 可以证明&＃xff0c;它并没有下载新的页面&＃xff0c;而是实时地更新