webpack 4 热更新后台成功更新浏览器不刷新

上一篇文章写的是 webpack4 打包，但是每次修改代码都要重新执行一次打包命令，实在是麻烦，本文将推出我的实现，仅做参考！！！

1.安装 webpack-dev-server

npm install webpack-dev-server --g
npm install webpack-dev-server --save-dev

2.配置webpack.config.js 文件

var webpack = require('webpack'); // 引入webpack
module.exports = {
    entry: __dirname + '/main.js',
    output: {
    	publicPath:'/dist', // 必须加publicPath
        path: __dirname + './dist',
        filename: 'bundle.js'
    },
    devServer: {
    	host: 'localhost',  // 访问地址
    	port: '8080',  // 访问端口
    	open: true, // 自动拉起浏览器
    	hot: true // 热加载
    },
    plugins: [
    	new webpack.HotModuleReplacementPlugin()  // 热更新插件
    ]
};

3.配置 package.json 文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "start":"webpack-dev-server"
  },

更新 css 文件需要用 loader 进行转换

npm install css-loader style-loader

入口文件引入 css 文件

  // 这里我把css文件放到src目录下 路径需要写正确
require("!style-loader!css-loader!./src/style.css");

4.运行

npm run dev

之后将会自动打开浏览器，修改文件就不用每次运行命令。极大方便
热更新必须有以下几点：
引入webpack
output里加publicPath
devServer中增加hot:true
在plugins中配置 new webpack.HotModuleReplacementPlugin()

鉴于每个人的配置可能不一样，此文章仅供参考！！！！

作者：如初7788
来源：CSDN
原文：https://blog.csdn.net/qq_34720531/article/details/86229995