在我的设置中,我们在本地机器上开发,然后将代码同步到vagrant盒子上。我通过同时运行webpack -w和rsync守护程序来使其工作--webpack构建文件,然后rsync立即捕获更改并上传它们。然而,这不适用于实时热重载。因此,我希望能够在我的HTML中交换这两行:
我希望webpack-dev-server能够仅替换webpack.stats.json文件中的捆绑路径为“实时”版本,那么我甚至不需要进行任何代码更改。
然而,当我使用webpack-dev-server时,似乎根本没有将stats文件写入磁盘,我猜测这是因为它被像任何其他资产一样对待,这意味着我不能再用PHP读取它了。
所以现在我不知道该怎么办。为了使这更容易回答,以下是几个问题:
1. 我能否在不更改Web URL的情况下使热加载正常工作?即,我可以保持URL不变,但链接到由webpack-dev-server提供的捆绑包,而不是访问webpack-dev-server并让它代理我们网站的其余部分吗? 2. 是否有其他方法可以在PHP中检索捆绑名称,而不是尝试解析此统计文件(在使用webpack-dev-server时不存在)?
如果需要查看,以下是我的webpack.config.js。
如果我输入
<script src="/assets/bundle-ba00eb4a9c20608dbf97.js" charset="utf-8"></script>
<link href="/assets/bundle-f6d909a555852937509481b27fc2ce5d.css" rel="stylesheet" type="text/css; charset=utf-8" />
有类似这样的东西:
<script src="http://localhost:8080/bundle.js" charset="utf-8"></script>
然后实时/热重载将神奇地起作用。
我无法在webpack-dev-server下运行整个应用程序,因为nginx仍然需要提供PHP应用程序的其余部分,包括一些未经过webpack处理的资产。
现在,上述2行HTML由此函数生成:
function($chunkName) {
static $stats;
if($stats === null) {
$stats = WxJson::loadFile(WX::$path.'/webpack.stats.json');
}
$paths = WXU::array_get($stats,['assetsByChunkName',$chunkName],false);
if($paths === false) {
throw new \Exception("webpack asset not found: $chunkName");
}
$html = [];
foreach((array)$paths as $p) {
$ext = WXU::GetFileExt($p);
switch($ext) {
case 'js':
$html[] = WXU::html_tag('script',['src'=>WXU::join_path($stats['publicPath'],$p),'charset'=>'utf-8'],'');
break;
case 'css':
$html[] = WXU::html_tag('link',['href'=>WXU::join_path($stats['publicPath'],$p),'rel'=>'stylesheet','type'=>'text/css; charset=utf-8'],null);
break;
}
}
return implode(PHP_EOL, $html);
}
我希望webpack-dev-server能够仅替换webpack.stats.json文件中的捆绑路径为“实时”版本,那么我甚至不需要进行任何代码更改。
然而,当我使用webpack-dev-server时,似乎根本没有将stats文件写入磁盘,我猜测这是因为它被像任何其他资产一样对待,这意味着我不能再用PHP读取它了。
所以现在我不知道该怎么办。为了使这更容易回答,以下是几个问题:
1. 我能否在不更改Web URL的情况下使热加载正常工作?即,我可以保持URL不变,但链接到由webpack-dev-server提供的捆绑包,而不是访问webpack-dev-server并让它代理我们网站的其余部分吗? 2. 是否有其他方法可以在PHP中检索捆绑名称,而不是尝试解析此统计文件(在使用webpack-dev-server时不存在)?
如果需要查看,以下是我的webpack.config.js。
如果我输入
'webpack-dev-server/client?http://localhost:5584/assets/',
'webpack/hot/only-dev-server',
在我的webpack.config.json
中加入new webpack.HotModuleReplacementPlugin()
,然后使用webpack
编译(而不是webpack-dev-server
),然后我在Chrome开发者工具中看到了这个:
GET http://localhost:5584/assets/info?t=1450478928633 net::ERR_CONNECTION_REFUSEDAbstractXHRObject._start @ abstract-xhr.js:128(anonymous function) @ abstract-xhr.js:21
[WDS] Disconnected!
很好。看起来这个捆绑包确实包含了必要的代码,现在我只需要弄清楚如何从PHP获取捆绑包的URL并解决CORS问题。
Unknown argument: content-base-target
。 - Nick