PHP后端上的ReactJS应用程序-如何在本地计算机上热加载？

我正在开发一个由PHP后端提供服务的ReactJS应用程序。在我的本地机器上，我设置了一个指向我的项目根目录的虚拟主机，并使用webpack捆绑我的React应用程序

由于我非常喜欢使用热加载，我现在尝试使用webpack dev服务器代理MAMP，并从其react热加载功能中获益

我还没能让它工作，我希望有人能帮助我配置。或者我的方法基本上不起作用吗？不管怎样，如果你能帮我解决这个问题，我会很高兴的。提前谢谢！以下是我目前的网页配置：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  devServer: {
    port: 3000,
    proxy: {
      '*': {
        target: 'http://my-virtual-host.dev:8888/',
      }
    }
  },
  entry: [
    './src/app.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:3000/build/'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'eslint-loader',
      },
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'react-hot-loader'
      },
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            'postcss-loader',
          ],
        }),
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),

    new ExtractTextPlugin('bundle.css'),
    new StyleLintPlugin({
      configFile: '.stylelintrc',
      context: 'src',
      files: '**/*.pcss'
    })
  ]
};

---

好了，我找到解决办法了！我的错：我认为我的WebpackDev服务器应该将每个请求“代理”到MAMP并返回其响应。换一种方式解决了我的问题：MAMP只为我的PHP应用程序和webpack dev服务器提供其资产

在开发模式下，我的PHP应用程序将资产链接到webpack开发服务器（围绕github问题的讨论对我帮助很大：）

现在，我在webpack配置中更改的主要属性有：

module.exports = {
  devServer: {
    proxy: {
      '*': {
        target: 'http://my-virtual-host.dev:8888/',
        changeOrigin: true,
      }
    }
  },
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/only-dev-server', // Enable hot reloading
    './src/app.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/build/'
  },
}

将资产链接到

http://localhost:8080/build/app.js
，
代理
设置和
输出.publicPath
完成了这项任务。热重新加载工作正常

虽然它现在对我有效，但我仍然对你的想法感兴趣
 这应该对你有帮助：谢谢@Axnyff！我一直在深入研究这个问题。让我困惑的是它基本上是如何工作的。是MAMP服务于my index.html，而webpack dev服务器服务于资产吗？或者是WebpackDev服务器提供一切服务，而不是从MAMP中“获取”index.html？谢谢大家!@如果我解决了我的问题，请参见下面的评论！非常感谢你帮助我走得更远！谢谢你们的研究，希望在不久的将来能尝试一下