HMR热更新

开启热更新

开启热更新

从 webpack-dev-server v4 开始，HMR 是默认启用的。它会自动应用 webpack.HotModuleReplacementPlugin，这是启用 HMR 所必需的。

  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    hot: true,
  },

文件内
HotModuleReplacementPlugin会为文件注入 module.hot

import { a } from './hot';
if (module.hot) {
  module.hot.accept('./hot', () => {
    console.log(a);
  });
}

React 热更新

需要下载 react react-dom，热更新需要加载 react-refresh @pmmmwh/react-refresh-webpack-plugin @babel/preset-react
webpack配置

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
modules:{
    rules:[
      {
        test: /\.jsx?$/,
        use: ['babel-loader'],
     },
  ]
},
plugins:[
     new ReactRefreshWebpackPlugin(),
]

babel.config,js

module.exports = {
  presets: [['@babel/preset-env'], ['@babel/preset-react']],
  plugins: [['react-refresh/babel']],
};

vue 热更新

需要下载 vue vue-loader vue-vue-template-compiler
注：vue-loader@14版本直接引用就好

const VueLoaderPlugin = require('vue-loader');

vue-loader@15之后

const VueLoaderPlugin = require('vue-loader/lib/plugin');

webpack

const VueLoaderPlugin = require('vue-loader/lib/plugin');
modules:{
    rules:[
      {
        test: /\.vue$/,
        use: ['vue-loader'],
     },
  ]
},
plugins:[
    new VueLoaderPlugin(),
]