PHP後端的ReactJS應用程序 - 如何在本地機器上熱重新加載？

我正在開發由PHP後端獲取服務的ReactJS應用程序。在我的本地機器上，我使用指向我項目根目錄的虛擬主機設置MAMP，並使用webpack捆綁我的React-App。PHP後端的ReactJS應用程序 - 如何在本地機器上熱重新加載？

因爲我真的很喜歡熱重載工作，所以我現在嘗試使用webpack dev服務器來代理MAMP和benfit從它的反應熱載入功能。

我還沒有得到它的工作，我希望有人來幫助我的配置。或者不是我的方法基本上工作？無論如何，如果你幫我解決這個問題，我會很高興。提前致謝！這是我的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' 
    }) 
    ] 
};

來源

2017-10-10 nielsG

這應該對你有所幫助：https://webpack.js.org/guides/hot-module-replacement/ – Axnyff

謝謝@Axnyff！我一直在深入研究這個問題。讓我困惑的是它基本上是如何工作的。 MAMP是否服務於我的index.html並且webpack dev服務器是否爲服務器提供資產？或者它是服務於一切的webpack開發服務器，但「需要」例如來自MAMP的index.html？謝謝！ – nielsG

@Axnyff我解決了我的問題，請參閱下面的評論！非常感謝您幫助我進一步發展！ – nielsG

好吧，我找到了解決方案！我的錯：我一直在想我的webpack dev服務器應該將每個請求「代理」給MAMP並返回它的響應。以相反的方式解決我的問題：MAMP服務我的PHP應用程序和webpack dev服務器只有它的資產。

當處於開發模式時，我的PHP應用程序將資產鏈接到webpack dev服務器（圍繞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/' 
    }, 
}

鏈接資產，例如http://localhost:8080/build/app.js，在proxy設置和output.publicPath奏效了。熱重裝工作正常。

雖然它現在對我來說很有效，但我依然在你的想法中加以考慮！

來源

2017-10-10 17:15:12 nielsG

PHP後端的ReactJS應用程序 - 如何在本地機器上熱重新加載？

回答

相關問題