webpack - 使用带有代理(？)的 webpack-serve 进行热重载

Question

我有一个服务于 REST API + 静态内容的服务器。是否可以使用 webpack-serve 提供静态内容并让它管理热重载，同时将以“/api”开头的调用传递给 REST API？

我尝试通过使用代理并指定内容目录来进行设置。这样 webpack-serve 就会回退到 REST API，因为它无法匹配磁盘上相应的 api 路径。我可以在浏览器中获取 API 端点，因此代理可以正常工作，但是使用 AJAX 进行 POST:ing 会得到 404:ed。

我可以在终端中看到我的源文件中的更改已被处理，但它们不会传播，无论是热更新还是手动刷新(js 包作为磁盘中的静态内容提供，它保持不变)。非常感谢指点!

我的配置:

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const proxy = require("http-proxy-middleware");
const convert = require("koa-connect");
const Router = require("koa-router");

const router = new Router();

const proxyOptions = {
  target: "http://localhost/",
  changeOrigin: true
};

router.get("*", convert(proxy(proxyOptions)));

module.exports = {
  watch: true,
  mode: "development",
  entry: "./internal-jsx/react-views.js",
  output: {
    path: path.resolve("static/scripts"),
    filename: "dev.bundle.js"
  },
  serve: {
    content: "./static",
    port: 8080,
    hot: {
      hot: true
    },
    add: (app, middleware, options) => {
      middleware.webpack();
      middleware.content();
      app.use(router.routes());
    }
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      { 
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                url: false
              }
            }
          ]
        })
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("../css/bundle.css")
  ]
};

Answer 1

您可以添加一个将请求转发到 webpack 服务器的中间件。

因此，所有请求都将首先通过您自己的服务器。如果是对 /api 的调用，请自行响应。如果是对静态资源的请求，则转发给webpack服务器。