正确链接到php站点中的webpack-dev-server软件包
我目前正试图更好地理解webpack和webpack-dev-server。正确链接到php站点中的webpack-dev-server软件包
我有以下设置:一个php站点提供一个反应应用程序,我希望在本站点上进行热模块替换(HMR)以用于开发目的。 因为我不希望我的WebPack-dev的服务器来为我的整个页面,我试图把它为我的bundle.js,然后我包括我的PHP文件此刻手动:
<script src="https://localhost:8877/dist/elements.bundle.js"></script>
问题是,对于生产,我必须手动更改此URL到类似/dist/elements.bundle.js
的东西,因为该服务器上的开发服务器不会提供该服务包。
我读了很多关于webpack-dev-server/client?https://localhost:8877
和 webpack/hot/only-dev-server
,如果我正确地理解它,那些条目将重定向到webpack-dev-server url?
如果我使用webpack-dev-server --config webpack.dev.js
运行我的npm start
-script,这将不会在文件系统中构建我的elements.bundle.js,而是仅从dev-server的内存中提供它。在这种情况下,我不能包含本地bundle.js,但必须使用localhost:8877
中的那个。但是我怎样才能让webpack编译入口点,并且webpack-dev-server在一个命令的同时执行它的工作?
如果我在两个终端运行webpack --config webpack.dev.js
和webpack-dev-server --config webpack.dev.js
,然后我可以加入我的PHP文件/dist/elements.bundle.js
,但HMR不工作了,因为它告诉我,它必须重新加载整个页面。
我真的很想理解这些概念,如果有人能给我一些建议并帮助我正确设置项目,我会很高兴。
如何在开发和生产之间进行切换而不改变我的php文件中的脚本标签,并且支持HMR和react-hot-loader?
这是我webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const development = process.env.NODE_ENV !== "production";
module.exports = merge(common, {
devtool: 'inline-source-map',
watch: development
});
这是我webpack.common.js:
const path = require('path');
const webpack = require('webpack');
require("babel-polyfill");
const development = process.env.NODE_ENV !== "production";
module.exports = {
context: path.resolve(__dirname, "webroot"),
devtool: 'cheap-eval-source-map',
entry: {
elements: [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?https://localhost:8877',
'webpack/hot/only-dev-server',
'./js/elements.client.js'
]
},
output: {
path: path.resolve(__dirname, "webroot", "js", "dist"),
filename: "[name].bundle.js",
publicPath: "https://localhost:8877/dist/"
},
plugins: [
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(development)
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-hot-loader/babel','react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
devServer: {
hot: true,
https: true,
inline: true,
host: 'localhost',
port: 8877,
contentBase: path.resolve(__dirname, "webroot"),
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
};
其实这不是webpack
或webpack-dev-server
但你的问题PHP。
我有同样的问题,和类似的设置。我结束了与PHP变量将包含/dist/bundle.js
上生产和http://localhost:3000/bundle.js
上发展。
条件是如果网站是从生产域服务或不。
$path_to_js = $_SERVER["HTTP_HOST"] === 'localhost' ? 'http://localhost:3000/bundle.js' : 'dist/bundle.js';
然后用这个变量你可以在你的主模板php文件中连接你的js文件的位置。
<html>
<head> ... </head>
<body>
<script src="<?=$path_to_js?>"></script>
</body>
</html>
希望帮助
服务啊,谢谢。我不喜欢这个解决方案,因为它取决于本地域,而我使用page.dev时,另一个开发人员使用page.local。我有点失望,没有纯粹的JS解决方案。也许我可以在我的php文件中创建一个脚本博客,根据所使用的环境更改脚本标记的URL ... –
因此,我认为我发现的最佳解决方案是让webpack创建一个JSON文件,声明是否生产或开发,我可以用php解析。也许这是行得通的。 –
我不明白。你为什么要这个?重新加载是为了开发,所以不需要php服务器解决方法(start命令allready为你创建一个nodejs http服务器)。 – Rienk
因为目前我有一个php框架在使用,可以做路由并提供一些JS变量。我不能简单地从节点服务器 –