Web 开发中的利器 - Webpack（4）Webpack-dev-server 配置
|
- UID
- 1066743
|
Web 开发中的利器 - Webpack（4）Webpack-dev-server 配置
Webpack-dev-server 配置Webpack-dev-serve 是 NodeJS 下的小型 Express 服务器，我们可以使用它来测试 webpack 所生成的文件。同时它通过 websocket 与服务器建立通信，支持对模块的代码监控，从而在文件变动时，动态的编译程序并自动刷新页面。
安装 webpack-dev-server
$ npm install webpack-dev-server --save-dev
webpack-dev-serve 的刷新方式
Iframe mode
Iframe 的形式并不需要修改配置文件。只需要在访问时调用 > 它的特点是
- 无需更改配置文件
- 在应用顶部会显示相关信息
- 应用本身的 URL 变化，并不会影响地址栏的内容
Inline mode
Inline 的形式，是将部分 web-dev-server 的客户端代码，嵌入到 webpack 模块当中。支持命令行（--inline）或者配置文件（devServer: { inline: true }）。
访问时调用 > 的特点是
- 支持配置文件和命令行
- 状态信息会显示在浏览器控制台中
- 应用本身的 URL 变化，会影响浏览器地址栏的内容
配置 webpack-dev-server
清单 13. 配置 webpack-dev-server1
2
3
4
5
6
7
8
9
10
| module.exports = {
....
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
}
|
然后再 package.json 里面配置一下运行的命令, npm 支持自定义一些命令
清单 14. package.json1
2
3
| "scripts": {
"start": "webpack-dev-server --hot --inline --host 0.0.0.0 --port <port>"
},
|
在命令行运行如下命令
打开浏览器，访问 http://localhost:<port>
设置 proxy server
通过 http-proxy-middleware 组件，将请求转发到其他第三方服务器上。这样做的好处就是，让前后端并行的开发而不相互影响。例如
清单 15. 设置 proxy server1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
// In webpack.config.js
{
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
}
// Multiple entry
proxy: [
{
context: [
'/api-v1/**',
'/api-v2/**'
],
target:
'https://other-server.example.com',
secure: false
}
]
|
在实际的应用中，有时候我们只是希望将部分请求（例如 web service 请求）发送到 proxy 上，而对于其他的文件请求，并不希望将其发送到 proxy server 上。此时，需要通过正确的设置 bypass 参数来解决，关于 bypass 方法的解释，请参考
清单 16. Bypass function1
2
3
4
5
6
7
8
9
10
11
12
13
14
| proxy: {
'/some/path': {
target: 'https://other-server.example.com',
secure: false,
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1)
{
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
|
|
|
|
|
|
|
