PHP 后端上的 ReactJS 应用程序 - 如何在本地机器上热重载? [英] ReactJS App on PHP backend - how to hot reload on local machine?

问题描述

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

I am developing a ReactJS-App that gets served by a PHP backend. On my local machine I set up MAMP with a virtual host pointing to my project's root and I use webpack to bundle my React-App.

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

Since I really enjoy working with hot reloading I now try to use the webpack dev server to proxy MAMP and benfit from its react hot loading capabilities.

我还不能让它工作，我希望有人能帮助我进行配置.或者我的方法基本上不起作用?不管怎样，如果你能帮我解决这个问题，我会很高兴的.提前致谢！到目前为止，这是我的 webpack 配置:

I haven't been able to get it working yet and I hope for someone to help me with the configuration. Or isn't my approach basically working? Anyway, I'll be happy if you help me out with this. Thanks in advance! Here's my webpack config so far:

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

推荐答案

好的，我找到了解决方案！我的错:我认为我的 webpack 开发服务器应该将每个请求代理"到 MAMP 并返回其响应.反过来解决了我的问题:MAMP 为我的 PHP 应用程序提供服务，而 webpack 开发服务器仅提供其资产.

Okay, I found the solution! My fault: I was thinking that my webpack dev server should "proxy" every request to MAMP and return its response. Putting in the other way around solved my Problem: MAMP serves my PHP Application and the webpack dev server only its assets.

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

When in development mode my PHP Application links assets to the webpack dev server (this discussion around a github issue helped me a lot: https://github.com/webpack/webpack-dev-server/issues/400).

现在，我在 webpack 配置中更改的主要属性是:

Now, the main attributes I changed in my webpack config are:

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、proxy 设置和 output.publicPath> 成功了.热重载工作正常.

Linking assets for example to http://localhost:8080/build/app.js, the proxy settings and the output.publicPath did the trick. Hot reloading works fine.

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

Although it works for me now I'm still interessted in your thoughts!

这篇关于PHP 后端上的 ReactJS 应用程序 - 如何在本地机器上热重载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！