webpack提供了一个可选的本地开发服务器,基于node.js搭建,内部使用express框架,让浏览器自动刷新修改后的结果。
安装
npm install webpack-dev-server@2.9.1 --save-dev
我学习用的webpack版本为3.6.0,所以相对应的本地服务器版本需要使用2.9.1版本
然后在webpack.config.js中配置如下内容
module.exports = {
...
devServer:{
contentBase: "./dist", //为那个文件夹提供服务,默认是根文件夹,我这里是./dist
inline: true, //页面实时刷新
port: 8888 //端口
}
}
如何运行呢?
在package.json里配置:
"scripts": {
"dev": "webpack-dev-server"
},
配置完后,就可以在命令行使用如下命令开启本地服务器
npm run dev
开启成功后,命令行会显示本地服务器地址:
本地服务器开启成功
效果展示
如果想要终止服务器,可以按CTRL+C,然后输入y就可以停止。