JAVA高级面试进阶训练营视频教程

admin

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

 

会撸码的小马 关注

2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2

接到上一章，如何搭建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