正确链接到 php 站点中的 webpack-dev-server bundle

我目前正在尝试更好地了解 webpack 和 webpack-dev-server。

我有以下设置：一个 php 站点提供反应应用程序，我希望在此站点上出于开发目的替换热模块 (HMR)。因为我不希望我的 webpack-dev-server 为我的整个页面提供服务，所以我试图让它为我的 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脚本，这不会在文件系统中构建我的 elements.bundle.js，而只会从开发服务器的内存中提供它。在这种情况下，我不能包含本地捆绑包.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 变量，它将包含关于生产和开发http://localhost:3000/bundle.js/dist/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>

希望有帮助

相关内容

最新更新

热门标签：