webpack dev server
一个webpack官方服务器
webpack dev server能够做什么?
- live reloading 触发浏览器自动刷新,当项目文件发生改变会被识别
- 路径重定向
- 支持https
- 支持在浏览器显示实时编译错误
- 接口代理(本地开发环境请求集成、测试环境接口)
- 模块热更新
常见配置
- devServer
-
inline false会开启打包状态栏
-
contentBase 提供内容路径
-
port 端口
-
historyApiFallback: true // 所以404页面都会重定向当前路由,或者更高级配置如下 pages/a指向pages/a.html
historyApiFallback: { rewrites: [{ from: 'pages/a' to: 'pages/a.html' }, { from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/, to: function (context) { return '/' + content.match[1] + context.match[2] + '.html' } }] }
-
https 默认情况下,dev-server将通过HTTP提供,开启后可以提供https,可以使用自己的证书
-
hot 开启模块热更新
-
openpage 访问初始界面
-
lazy 懒加载模式
-
overlay 遮罩,在打开页面给出错误
-
compress 提供gizp压缩
-
headers 添加响应头
-
使用
-
安装webpack-dev-server
npm install --save-dev webpack-dev-server
-
webpack.config.js内配置devServer,不需要require该模块
output: {
},
devServer: {
port: 3030,
historyApiFallback: true // 任何路径都会重定向当前url不会报404,false则会
},
module: {
…
} -
命令行运行命令
// 方式1 node_modules/.bin/webpack-dev-server --open // 方式2 在package文件配置 "script": { "start": "webpack-dev-server --open" } 然后运行 npm run start