想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。
1、安装webpack-dev-server
配置好后执行 webpack-dev-server，这时候会报错。需要在package.json加上服务器信息。
2、在package.json中的scripts对象中添加如下命令，用以开启本地服务器
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
3、下载好之后需要在webpack.config.js里面配置下devServer
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/index.js'
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'bundle.js'
},
mode:"development",
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
host:'192.168.118.221',
compress:true,
port:
}// 配置webpack服务
}
host是你自己的ip地址，port是端口号
devserver作为webpack配置选项中的一项，以下是它的一些配置选项
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
4、配置好后，在终端执行npm run server，发现还是会报错。如下图所示，webpack-cli没有安装
5、安装webpack-cli：
注意：需要全局和局部都安装。先npm install webpack-cli -g，再npm install webpack-cli -D，否则的话，依然会报上面的错误。
6、执行npm run server
执行成功