webpack-dev-server怎么配置，实现实时自动刷新

Posted 2023-05-01

1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。 2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。 参考技术A 实现修改代码自动刷新浏览器，需要添加相关插件，webpack提供了2种热更新的办法 1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。 2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。...

webpack-dev-server的配置

# webpack中webpack-dev-server的配置实现功能

 

首先是用npm下载npm install webpack-dev-server --save-dev

打开webpack.config.js添加配置信息，需要修改output，添加devServer、
plugins

//这里要在output中写绝对路径
...
output:{
path:‘lib‘,//我这里的路径是在lib文件夹下
publicPath:"http://127.0.0.1:8080/lib/",
filename:‘bundle.js‘
},
...

...
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,
},
...
plugins:[
new webpack.DefinePlugin({
‘process.env.NODE.ENV‘:"development"
}),
new webpack.HotModuleReplacementPlugin()
]
到这里算是配置好了。接下来就是启动它了，我们可以自定义个命令。在package.js中
...
"scripts": {
"start": "webpack-dev-server --inline"//这里没有添加-hot
},
...

保存，ok。输入npm run start
等运行完之后，打开浏览器输入http://localhost:8080/lib/index.html；然后再试试看。