Как заставить webpack-dev-server работать с существующим приложением?

В моей настройке мы разрабатываем на наших локальных машинах, а затем пересылаем наш код в бродячую коробку.

Я получил это работает, запустив webpack -w и демон rsync вместе — веб-пакет создает файлы, а затем 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, включая некоторые не упакованные ресурсы.

Прямо сейчас вышеупомянутые 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, я думаю, потому что он обрабатывается как актив, как и любой другой, что означает, что я больше не могу читать его с помощью PHP.

Так что теперь я не знаю, что делать. Чтобы сделать это более ответственным, вот пара вопросов:

  1. Могу ли я получить горячую загрузку без изменения нашего веб-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',

А также new webpack.HotModuleReplacementPlugin() в моем webpack.config.json и скомпилировать его (с webpack не webpack-dev-server) тогда я вижу это в моих инструментах Chrome Dev:

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.

4

Решение

это Суть Предоставленный jonnsonliang7 показывает очень простую интеграцию Webpack с внешним сервером.

  1. клонировать эту суть
  2. установка npm
  3. начало вечера
  4. Визит HTTP: // локальный: 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"}
    
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]