webpack 模块热更新配置

1、配置webpack不需要安装什么，只需要原先安装的webpack即可配置

const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js'
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open: true,
    hot: true,    //开启热更新
    hotOnly: true   //开启热更新失败，依然不刷新浏览器
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()  // 这个插件一定要使用
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

2、css-loader 自动配置了热更新，更改了css，样式自己就改变了，react、vue框架自身也配置了，如果需要自定义，代码如下

if(module.hot){    //在你要监听的文件里面写
    module.hot.accept('./src',()=>{    // ./src值得是更新文件路径
        console.log('代码热更新，写自己的代码控制')        
    })
}