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

Question

In my setup, we develop on our local machines and then rsync our code to a vagrant box.

I got this working by running webpack -w and an rsync daemon together -- webpack builds the files and then rsync immediately picks up the changes and uploads them.

However, this won't work with live/hot-reloading. So what I was hoping to do was to swap out these two lines in my 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" />

With something like:

<script src="http://localhost:8080/bundle.js" charset="utf-8"></script>

And then live/hot reloading would magically work.

I can't run my whole app under the webpack-dev-server because nginx still needs to serve up the rest of the PHP app, including some non-webpacked assets.

Right now the the above 2 lines of HTML are generated by this function:

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);
}

I was hoping to have the webpack-dev-server simply replace the bundle path in the webpack.stats.json file with the "live" version, and then I wouldn't even need to make any code changes.

However, the stats file doesn't seem to get written to disk at all when I use webpack-dev-server, I guess because it's treated like an asset like any other, which means that I can no longer read it with PHP.

So now I don't know what to do. To make this more answerable, here's a couple of questions:

1. Can I get hot-loading to work without changing our web URL? i.e., can I keep the URL the same but link to a bundle served by webpack-dev-server rather than visiting webpack-dev-server and have it proxy the rest of our site?

2. Is there another way for me to retrieve the bundle name in PHP rather than trying to parse this stats file which doesn't exist when using the webpack-dev-server?

Here's my webpack.config.js if you need to see it.

---

If I put

'webpack-dev-server/client?http://localhost:5584/assets/',
'webpack/hot/only-dev-server',

And new webpack.HotModuleReplacementPlugin() in my webpack.config.json and compile it (with webpack not webpack-dev-server) then I see this in my Chrome dev tools:

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!

Which is good. It looks like the bundle does contain the necessary code, now I just have to figure out how get the URL for the bundle from PHP and fix the CORS issue.

Answer 1

This Gist provided by jonnsonliang7 shows a very simple integration of Webpack with an external server.

1. clone this gist
2. npm install
3. npm start
4. Visit http://localhost:8080 (or http://192.168.x.x:8080) on multiple devices
5. Edit entry.js and hit save

6. Watch the page updates itself across multiple devices

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