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

时间:2015-12-18 22:23:45

标签: php webpack webpack-dev-server

在我的设置中,我们在本地计算机上进行开发,然后将我们的代码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资产。

现在,上述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 file中的包路径替换为“live”版本,然后我甚至不需要进行任何代码更改。

然而,当我使用webpack-dev-server时,stats文件似乎根本没有写入磁盘,我想因为它被视为像其他任何资产一样,这意味着我再也无法读取它了PHP。

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

  1. 我是否可以在不更改网址的情况下进行热插拔工作?即,我可以保持URL相同但链接到webpack-dev-server服务的捆绑包,而不是访问webpack-dev-server并让它代理我们网站的其余部分吗?

  2. 我是否有另一种方法可以在PHP中检索捆绑包名称,而不是尝试解析使用webpack-dev-server时不存在的stats文件?

  3. 如果您需要查看,请点击此处webpack.config.js

    如果我把

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

    我的new webpack.HotModuleReplacementPlugin() webpack.config.json并编译它(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问题。

1 个答案:

答案 0 :(得分:1)

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

  1. 克隆这个要点
  2. npm install
  3. npm start
  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"
    }