webpack4 热更新，浏览器刷新

上一篇文章写的是 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', // 必须加publicPathpath: __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 文件

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

4.运行

npm run start

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

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