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应用程序 - 如何在本地机器上热重新加载？

回答

相关问题