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'
})
]
};
答
好吧,我找到了解决方案!我的错:我一直在想我的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
奏效了。热重装工作正常。
虽然它现在对我来说很有效,但我依然在你的想法中加以考虑!
这应该对你有所帮助:https://webpack.js.org/guides/hot-module-replacement/ – Axnyff
谢谢@Axnyff!我一直在深入研究这个问题。让我困惑的是它基本上是如何工作的。 MAMP是否服务于我的index.html并且webpack dev服务器是否为服务器提供资产?或者它是服务于一切的webpack开发服务器,但“需要”例如来自MAMP的index.html?谢谢! – nielsG
@Axnyff我解决了我的问题,请参阅下面的评论!非常感谢您帮助我进一步发展! – nielsG