1. 概述
webpack提供了一个可选的基于node.js的本地开发服务器,内部使用了express框架,可以实现我们想要让浏览器自动刷新显示我们修改后的结果。
2. 安装
因为它是一个单独的模块,需要安装
npm install webpack-dev-server --save-dev
3. 配置
devServer: {
contentBase: './dist',
inline: true
}
contentBase:为哪一个文件夹提供本地服务器,默认根文件夹
inline:页面实时刷新
port:我们还可以指定端口号,不写默认8080
historyApiFallback:在SPA页面中,依赖HTML5的history模式
4. 运行
一种是直接输入文件的相对地址(不推荐)
推荐在webpack.config.js中配置脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open"
},
然后通过 npm run dev 即可运行,这里 --open是表示运行后自动打开网页