ReactJS PHPバックエンド上のアプリケーション - ローカルマシンでホットリロードする方法？

Question

私はReactJS-Appを開発しており、これはPHPバックエンドによって提供されます。私のローカルマシンでは、プロジェクトのルートを指す仮想ホストでMAMPをセットアップし、webpackを使用してReact-Appをバンドルします。

ホットリロードで作業することを本当に楽しんでいるので、今すぐwebpack dev-serverをプロキシMAMPに使用して、反応ホットローディング機能を利用しようとしています。

私はまだ動作していないので、誰かが設定を手伝ってくれることを願っています。それとも、基本的に私のアプローチではないのですか？とにかく、これで私を助けてくれたら嬉しいよ。前もって感謝します！これまでの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 dev serverがMAMPへのすべてのリクエストを "代理"してその返答を返さなければならないと考えていました。別の方法で私の問題を解決する：MAMPは私のPHPアプリケーションとwebpack devサーバをその資産だけを提供します。

私のPHPアプリケーションは、webpack devサーバにアセットをリンクしています（githubの問題に関するこの議論は、私に多くの助けになりました：https://github.com/webpack/webpack-dev-server/issues/400）。例えばhttp://localhost:8080/build/app.jsへ

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/' 
    }, 
} 

リンク資産、proxy設定やoutput.publicPathはトリックをした：

は今、私は私のWebPACKの設定で変更主な属性です。ホットリロードは正常に動作します。

これは私のために働いていますが、今私はあなたの考えにまだ魅了されています！