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

 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