Настройка веб-пакета с помощью Django
Я работаю над приложением Vue в Django через https://github.com/owais/django-webpack-loader, работаю локально, и я могу заставить его работать, используя следующее в моем base.html
файл:
{% load render_bundle from webpack_loader %}
...
...
{% render_bundle 'app' %}
Однако в производственной среде это не работает - я полагаю, потому что производственная конфигурация веб-пакета использует CommonChunksPlugin для разделения пакетов на app
, manifest
а также vendor
,
В Интернете не так много документации по слиянию Webpack с Django - мне интересно, есть ли способ включить все куски в шаблон Django.
3 ответа
Проблема в конце была из-за разделения кода. В dev создается один файл JS, но в производственном конфиге Webpack CommonChunksPlugin
был настроен на разделение приложения на 3 файла (манифест, поставщик и приложение).
Это решение не является идеальным и может плохо масштабироваться, но, поместив условный тег в шаблон Django, я смог правильно сослаться на необходимые файлы.
{% if STAGE or PRODUCTION %}
{% render_bundle 'vendor' 'js' %}
{% render_bundle 'manifest' 'js' %}
{% endif %}
{% render_bundle 'app' 'js' %}
Вы редактировали settings.py, чтобы он указывал на каталог с комплектом?
APP_DIR = os.path.join(BASE_DIR, 'app')
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/'
}
}
STATICFILES_DIRS = (
os.path.join(APP_DIR, 'assets'),
)
Затем используйте HtmlWebpackPlugin, чтобы указать на куски? https://github.com/jantimon/html-webpack-plugin/blob/master/README.md#writing-your-own-templates
plugins: [
new HtmlWebpackPlugin({
template: 'static/app/index.html'
}),
]
Согласно django-webpack-loader README.md
Версия 1.0 и выше django-webpack-loader также поддерживает несколько конфигураций Webpack.
Таким образом, можно было бы определить 2 файла статистики Webpack в настройках: один для обычного и один для stage/prod.
WEBPACK_LOADER = {
'STAGE_OR_PROD': {
'BUNDLE_DIR_NAME': 'stage_or_prod_bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-stage-or-prod.json'),
},
'NORMAL': {
'BUNDLE_DIR_NAME': 'normal_bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-normal.json'),
}
}
а затем можно использовать аргумент конфигурации в тегах шаблона, чтобы повлиять на то, из какого файла статистики загружать пакеты.
{% load render_bundle from webpack_loader %}
<html>
<body>
....
{% render_bundle 'main' 'js' 'STAGE_OR_PROD' %}
{% render_bundle 'main' 'js' 'NORMAL' %}