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