Webpack代理proxy配置，解决本地跨域调试问题，同时允许绑定host域名调试

接到上一章，如何搭建webpack4的开发调试，如果有没有了解的可以去看看：https://www.jianshu.com/p/be44baced73b

接到上一章的配置

webpakc.config.js


const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const srcDir = path.join(__dirname, './src');
const distDir = path.join(__dirname, './dist');module.exports = {
entry: {
index: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:80',
"./src/js/index.js"
]
},
output: {
path: path.resolve(__dirname, 'dist'),
// 给js css 图片等在html引入中添加前缀
publicPath: "../../",
filename: 'js/[name].min.js',
}, devtool: 'source-map', module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: 'css-loader'
},
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}
]
}, plugins: [
new CleanWebpackPlugin(['dist']), new ExtractTextPlugin('style/[name].min.css'),
new HtmlWebpackPlugin({
hash: true,
chunks: ['index'],
template: "./src/pages/index/index.html",
filename: "pages/index/index.html"
}), new webpack.HotModuleReplacementPlugin(),
]
};


webpack.dev.service.js

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var webpackConfig = require('./webpack.config.js');
var compiler = webpack(webpackConfig);
var bird = require('birdv3');
var server = new WebpackDevServer(compiler, { watchContentBase: true, disableHostCheck: true,
// 允许绑定本地域名
allowedHosts: [
'xxx.xxx.com'
], // before: function (app) {
// app.use(bird('./birdfileConfig.js'))
// }, hot: true,
historyApiFallback: true,
// It suppress error shown in console, so it has to be set to false.
quiet: false,
// It suppress everything except error, so it has to be set to false as well
// to see success build.
noInfo: false,
stats: {
// Config for minimal console.log mess.
assets: false,
colors: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
},
proxy: {
"/api": {
target: "https://xxx.xxxx.com",
// 因为使用的是https，会有协议安全校验，所以设置secure为false
secure: false,
// port: 80,
// ingorePath 默认即为 false, 注释掉也可以
// ingorePath: false,
// changeOrigin是关键，如果不加这个就无法跳转请求，会产生跨域请求的问题
changeOrigin: true,


pathRewrite: {
'^/api': ''//一般不会重写
}

} }, // contentBase不要直接指向pages，因为会导致css、js支援加载不到 contentBase: __dirname + '/src/', }).listen(80, '0.0.0.0', function (err) { if (err) { console.log(err); } });

注意disableHostCheck 、 allowedHosts是允许绑定本地Host域名的
proxy 是允许指定接口调用直接使用服务端接口，需要服务端支持代理，避免以后每次开发都要解决跨域问题

PS: 如果不喜欢使用webpack自带的proxy，也可以使用birdv3，这也是一个服务端代理框架。个人认为使用webpack已经能完全满足日常开发需求，但是如果有需要birdv3的可以找我！这里就不详述怎么使用birdv3了，谢谢

附上github地址：https://github.com/majianguang/h5Base