webpack-dev-server的配置

Posted 2020-07-28 逆水行舟，心如止水。

# 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；然后再试试看。