php – 如何让webpack-dev-server与现有应用程序一起使用？
|
在我的设置中,我们在本地计算机上进行开发,然后将我们的代码rsync到一个流浪盒中.
我通过运行webpack -w和rsync守护进程来实现这一点 – webpack构建文件然后rsync立即获取更改并上传它们. 但是,这不适用于live / hot-reloading.所以我希望做的是在我的HTML中换掉这两行： <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应用程序的其余部分,包括一些非webpacked资产. 现在,这个函数生成了上面两行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'],'rel'=>'stylesheet','type'=>'text/css; charset=utf-8'],null);
break;
}
}
return implode(PHP_EOL,$html);
}
我希望让webpack-dev-server简单地用“live”版本替换webpack.stats.json file中的bundle路径,然后我甚至不需要进行任何代码更改. 但是,当我使用webpack-dev-server时,stats文件似乎根本没有被写入磁盘,我想因为它像其他任何资源一样被视为资产,这意味着我无法再用PHP读取它. 所以现在我不知道该怎么做.为了使这更容易回答,这里有几个问题： >我可以在不更改网址的情况下进行热插拔工作吗？即,我可以保持URL相同,但链接到webpack-dev-server服务的捆绑包,而不是访问webpack-dev-server并让它代理我们网站的其余部分？ 如果你需要看到它,这是我的webpack.config.js. 如果我放 'webpack-dev-server/client?http://localhost:5584/assets/','webpack/hot/only-dev-server', 我的webpack.config.json中新的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问题. 解决方法
jonnsonliang7提供的这个
Gist显示了Webpack与外部服务器的非常简单的集成.
>克隆这个要点 // entry.js
document.write("<h1>Hello World!</h1>");
// index.html
<script src="./bundle.js"></script>
// package.json
{
"name": "testhmr","version": "1.0.0","description": "","main": "entry.js","dependencies": {
"webpack": "^1.7.3"
},"devDependencies": {
"webpack": "^1.7.3","webpack-dev-server": "^1.7.0"
},"scripts": {
"start": "npm run start-backend & npm run start-dev-server","start-backend": "python -m SimpleHTTPServer 5000","start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' webpack/hot/dev-server ./entry --hot --host 0.0.0.0 --content-base-target 'http://127.0.0.1:5000'"
},"author": "","license": "MIT"
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |