webpack 学习之 devServer
devServer 在开发模式下提供本地服务器环境
它提供实时更新加载功能,极大提高我们本地开发的效率。
1.使用
使用时需要使用npm安装
// 安装
npm install webpack-dev-server --save-dev
webpack-dev-server 的配置项可以通过CLI
传入
// 通过 CLI
webpack-dev-server --contentBase /path/to/content/dir
也可以通过 webpack.config.js
的 devServer
对象传入
// 通过 webpack.config.js 配置
const path = require('path')
moudle.exports = {
//...
devSever : {
contentBase: path.join(__dirname, 'dist')
// ...
}
}
2.常用配置项
devServer.host string = 'localhost'
指定要使用的主机,如果想让外部访问本机服务器,应设置为 '0.0.0.0'
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
devServer.port number
指定使用的端口
module.exports = {
//...
devServer: {
port: 3001
}
};
devServer.proxy object [object, function]
配置 API requests 代理相关
如果你想把你的请求代理到 localhost:3000 ,可以如下设置
// webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
一个 /api/users 的 request 将会代理到 http://localhost:3000/api/users
如果你不希望传递 /api,可以通过 pathRewrite
参数重写路径
// webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
一般情况下,一个使用无效证书的HTTPS是不允许被使用的。如果需要配置的话,可以通过 secure
进行配置
// webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
如果有一些内容不想被代理,可以通过bypass
属性传入一个函数,并返回对应处理的值
在函数里面,可以访问到 request,respond 和 proxyOptions参数。
- return
null
或undefined
继续使用代理处理请求。 - return
false
会为请求产生404错误。 - retrun 提供服务的路径,而不是继续代理请求。
例如: 对于浏览器请求,您想要提供HTML页面,但是对于API请求,您想要代理它。 您可以执行以下操作:
// webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};
如果要代理到同一目标的多个特定路径,则可以使用带有content
属性的一个或多个对象的数组:
webpack.config.js
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
请注意,默认情况下不会代理对root的请求。 要启用根代理,应将devServer.index选项指定为伪造值:
// webpack.config.js
module.exports = {
//...
devServer: {
index: '', // specify to enable root proxying
host: '...',
contentBase: '...',
proxy: {
context: () => true,
target: 'http://localhost:1234'
}
}
};
默认情况下,代理时会保留主机的来源,可以将changeOrigin
设置为true
来覆盖此行为。
// webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
};
devServer.historyApiFallback boolean = false object
…未完待续
本文地址:https://blog.csdn.net/qq_31598771/article/details/107491413