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