我通过运行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资产.
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并让它代理我们网站的其余部分?
>我是否有另一种方法可以在PHP中检索包名称,而不是尝试解析使用webpack-dev-server时不存在的stats文件?
如果你需要看到它,这是我的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!
解决方法
>克隆这个要点
> npm安装
> npm开始
>在多台设备上访问http://localhost:8080(或http://192.168.x.x:8080)
>编辑entry.js并点击保存
>在多个设备上观看页面更新
// 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" }