如何将webpack-dev-server与现有应用程序配合使用？

Question

如何将webpack-dev-server与现有应用程序配合使用？

4

在我的设置中，我们在本地机器上开发，然后将代码同步到vagrant盒子上。我通过同时运行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应用程序的其余部分，包括一些未经过webpack处理的资产。

现在，上述2行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文件中的捆绑路径为“实时”版本，那么我甚至不需要进行任何代码更改。

然而，当我使用webpack-dev-server时，似乎根本没有将stats文件写入磁盘，我猜测这是因为它被像任何其他资产一样对待，这意味着我不能再用PHP读取它了。

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

1. 我能否在不更改Web URL的情况下使热加载正常工作？即，我可以保持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!

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

- mpen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mummybot · Accepted Answer

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

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

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