当前位置: 代码迷 >> 综合 >> webpack4.0核心概念(十)—— HMR(热模块替换-局部刷新)
  详细解决方案

webpack4.0核心概念(十)—— HMR(热模块替换-局部刷新)

热度:54   发布时间:2023-11-29 13:00:30.0

 HMR:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新。

css的HMR——只支持开发环境

不能使用mini-css-extract-plugin需要使用style-loader,因为它不支持抽离出的css,需要用style-loader

① 在webpack.config.js中配置 (需要webpack-dev-server配合) 

//头部引入webpack
const webpack = require("webpack");//****
//****
//****
//****devServer: {hot: true,
},//****
//****
//****
//****//插件配置出添加
plugins: [new htmlWebpackPlugin({template: "./src/index.html",filename: "index.html",chunks: ["main"],}),new CleanWebpackPlugin(),// new miniCssExtractPlugin({//   filename: "css/index-[contenthash:6].css",// }),// new txtWebpackPlugin({ name: "老韩" }),new fileWebpackPlugin(),new webpack.HotModuleReplacementPlugin(),   //webpack自带插件
],

②运行

   package.json中

 "scripts": {"server": "webpack-dev-server "},

  npm run server

js的HMR 

vue 使用vue-loader 

  相关解决方案