3

我有一个服务于 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")
  ]
};
4

1 回答 1

0

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

因此，所有请求都将首先通过您自己的服务器。如果它是一个自己/api响应的电话。如果是静态资源请求，转发到 webpack 服务器。

于 2018-06-25T03:47:32.077 回答