В моей настройке мы разрабатываем на наших локальных машинах, а затем пересылаем наш код в бродячую коробку.
Я получил это работает, запустив 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.
Так что теперь я не знаю, что делать. Чтобы сделать это более ответственным, вот пара вопросов:
Могу ли я получить горячую загрузку без изменения нашего веб-URL? то есть, могу ли я сохранить URL-адрес таким же, но ссылаться на пакет, обслуживаемый webpack-dev-server, вместо того, чтобы посещать webpack-dev-server, и иметь ли он прокси-сервер для остальной части нашего сайта?
Есть ли у меня другой способ получить имя пакета в 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.
это Суть Предоставленный jonnsonliang7 показывает очень простую интеграцию Webpack с внешним сервером.
Следите за обновлениями страницы на нескольких устройствах
// 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"}
Других решений пока нет …