如何讓webpack-dev-server與現有應用程序一起使用？

Question

在我的設置中，我們在本地計算機上進行開發，然后將我們的代碼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'],$p),'rel'=>'stylesheet','type'=>'text/css; charset=utf-8'],null);
                break;
        }
    }
    return implode(PHP_EOL, $html);
}

我希望讓webpack-dev-server簡單地用“live”版本替換webpack.stats.json文件中的bundle路徑，然后我甚至不需要進行任何代碼更改。

但是，當我使用webpack-dev-server時，stats文件似乎根本沒有被寫入磁盤，我想因為它像其他任何資源一樣被視為資產，這意味着我無法再用PHP讀取它。

所以現在我不知道該怎么做。 為了使這更容易回答，這里有幾個問題：

1. 我可以在不更改網址的情況下進行熱插拔嗎？ 即，我可以保持URL相同，但鏈接到webpack-dev-server服務的捆綁，而不是訪問webpack-dev-server並讓它代理我們網站的其余部分？

2. 我是否有另一種方法可以在PHP中檢索包名稱，而不是嘗試解析使用webpack-dev-server時不存在的stats文件？

這是我的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問題。

Answer 1

jonnsonliang7提供的這個Gist顯示了Webpack與外部服務器的非常簡單的集成。

1. 克隆這個要點
2. npm安裝
3. npm開始
4. 在多個設備上訪問http：// localhost：8080 （或http：//192.168.xx：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" }