How to make webpack-dev-server work with an existing application?

Question

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

I got this working by running the webpack -wrsync daemon together too - webpack creates the files, and then rsync immediately picks up the changes and downloads them.

However, this will not work with direct / hot reload. So I was hoping to do this in order to swap 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 a live / hot reboot will magically work.

I cannot run my entire application under a webpack-dev server, because nginx should still serve the rest of the PHP application, including some insecure resources.

Currently, these two HTML lines 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);
}

, webpack-dev- webpack.stats.json "live", - .

, , , webpack-dev-server, , , , , PHP.

, , . , :

• -? URL- , , webpack-dev-, , webpack-dev- - ?

• PHP, , webpack-dev-?

webpack.config.js, .

---

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

new webpack.HotModuleReplacementPlugin() webpack.config.json ( webpack not 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!

. , , , URL- PHP CORS.

Answer 1

Gist, jonnsonliang7, Webpack .

• clone this gist
• npm install
• npm start
• http://localhost:8080 ( http://192.168.x.x:8080)
• .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"
  }