php - 如何让 webpack-dev-server 与现有应用程序一起工作？

Question

在我的设置中，我们在本地机器上开发，然后将我们的代码同步到一个 vagrant box。

我通过同时运行 webpack -w 和一个 rsync 守护进程来实现这一点——webpack 构建文件，然后 rsync 立即获取更改并上传它们。

但是，这不适用于实时/热重载。所以我希望做的是在我的 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 Assets 。

现在上面两行 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 file 中的包路径使用“实时”版本，然后我什至不需要进行任何代码更改。

但是，当我使用 webpack-dev-server 时，stats 文件似乎根本没有写入磁盘，我猜是因为它像其他任何 Assets 一样被对待，这意味着我无法再读取它PHP.

所以现在我不知道该怎么办。为了使这个更容易回答，这里有几个问题:

1. 我可以在不更改网址的情况下进行热加载吗？即，我能否保持 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!

哪个好。看起来 bundle 确实包含必要的代码，现在我只需要弄清楚如何从 PHP 获取 bundle 的 URL 并解决 CORS 问题。

Answer 1

这Gist jonnsonliang7 提供的展示了 Webpack 与外部服务器的非常简单的集成。

1. 克隆这个要点
2. npm 安装
3. npm 开始
4. 访问http://localhost:8080 (或 http://192.168.x.x:8080 )在多个设备上
5. 编辑 entry.js 并点击保存

6. 观看页面在多个设备上自行更新

   // 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"
   }