Question

我正在尝试创建Wordpress主题开发环境（更确切地说是从具有浏览器同步功能的gulp迁移到webpack）。因此，我已经设置了一个指向我的wordpress安装的代理（也在本地）。当我在浏览器中访问webpack开发服务器时，代理似乎工作正常。例如localhost:8080/sample-page显示WordPress页面localhost:8000/sample-page。

问题是，该页面内的任何链接都将指向原始端口。当我使用页面上的导航时，我被重定向回localhost:8000/*。

使用gulp，我只需要创建一个与浏览器同步的任务，并将目标URL作为一个选项即可，并且效果很好：

browserSync.init({
  proxy: pjson.themeURL || "localhost:8000",
  open: false
});

我尝试更改HTTP代理中间件的不同选项，目前，我获得了以下配置（我还尝试了自动重写等选项）：

  devServer: {
    publicPath: `${options.publicPath}/build/`,
    proxy: {
      "*": {
        target: pjson.proxyURL || "http://localhost:8000",
        logLevel: "debug",
        secure: false,
        changeOrigin: true
      }
    }
  },

publicPath将解析为/wp-content/themes/theme-name/build/（我也尝试包括整个URL而不仅仅是路径）

我希望我可以像浏览器同步代理一样运行它。也许我需要设置一些标题？

感谢所有帮助！

编辑：

我从浏览器同步源中找到了以下代码，该代码似乎具有负责替换页面内所有链接的方法： https://github.com/BrowserSync/browser-sync/blob/master/packages/browser-sync/lib/server/proxy-utils.js

开发服务器似乎可以用onProxyRes钩子修改请求，在这里我可以做一些修改所有链接的操作，但我还没有时间尝试一下，所以我现在使用浏览器同步atm。

Answer 1

我还没有找到解决方案，我当前的解决方法是在没有webpack-dev-server的情况下使用webpack -watch和浏览器同步，这种方式虽然无法进行热重装：/

我的webpack配置插件当前看起来像这样：

  plugins: [
    new BrowserSyncPlugin({
      port: pjson.themeConf.port || 3000,
      proxy: pjson.themeConf.proxyURL || "localhost:8000",
      files: ["**.php"]
    }),
    new MiniCssExtractPlugin({})
  ],

带WordPress的Webpack代理不重定向页面内的GET请求

1 个答案: