Question

我有一台服务于REST API +静态内容的服务器。是否可以使用webpack-serve提供静态内容，并让它管理热重新加载，同时以＆＃34; / api＆＃34;传递给REST API？

我尝试使用代理并指定内容目录来进行设置。这样webpack-serve就会回退到REST API，因为它无法与磁盘上相应的api路径匹配。我可以在浏览器中获取API端点，因此代理工作正常，但POST：使用AJAX获得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服务器。

使用带代理的webpack-serve热重新加载（？）

1 个答案: