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

Question

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

由于我真的很喜欢使用热重载，所以我现在尝试使用 webpack 开发服务器来代理 MAMP 并从其 react 热加载功能中受益。

我还没能让它工作，我希望有人能帮助我进行配置。还是我的方法根本不起作用？无论如何，如果你能帮我解决这个问题，我会很高兴。提前致谢!这是到目前为止我的 webpack 配置:

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'
    })
  ]
};

Answer 1

好的，我找到解决方案了!我的错:我认为我的 webpack 开发服务器应该将每个请求“代理”到 MAMP 并返回其响应。换句话说，解决了我的问题:MAMP 为我的 PHP 应用程序提供服务，而 webpack 开发服务器仅提供其 Assets 。

在开发模式下，我的 PHP 应用程序将 Assets 链接到 webpack 开发服务器(围绕 github 问题的讨论对我帮助很大:https://github.com/webpack/webpack-dev-server/issues/400)。

现在，我在 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/'
  },
}

将 Assets 链接到例如 http://localhost:8080/build/app.js、proxy 设置和 output.publicPath > 成功了。热重载工作正常。

虽然现在它对我有用，但我仍然对你的想法感兴趣!