接到上一章，如何搭建webpack4的開(kāi)發(fā)調(diào)試，如果有沒(méi)有了解的可以去看看：http://www.itdecent.cn/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",
            // 因?yàn)槭褂玫氖莌ttps，會(huì)有安全校驗(yàn)，所以設(shè)置secure為false
            secure: false,
            // port: 80,
            // ingorePath 默認(rèn)即為 false, 注釋掉也可以
            // ingorePath: false, 
            // changeOrigin是關(guān)鍵，如果不加這個(gè)就無(wú)法跳轉(zhuǎn)請(qǐng)求
            changeOrigin: true,
        }
    },
    // contentBase不要直接指向pages，因?yàn)闀?huì)導(dǎo)致css、js支援加載不到
    contentBase: __dirname + '/src/',
}).listen(80, '0.0.0.0', function (err) {
    if (err) {
        console.log(err);
    }
});

注意disableHostCheck 、 allowedHosts是允許綁定本地Host域名的
proxy 是允許指定接口調(diào)用直接使用服務(wù)端接口，需要服務(wù)端支持代理，避免以后每次開(kāi)發(fā)都要解決跨域問(wèn)題

PS: 如果不喜歡使用webpack自帶的proxy，也可以使用birdv3，這也是一個(gè)服務(wù)端代理框架。個(gè)人認(rèn)為使用webpack已經(jīng)能完全滿(mǎn)足日常開(kāi)發(fā)需求，但是如果有需要birdv3的可以找我！這里就不詳述怎么使用birdv3了，謝謝

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