Настройка веб-пакета с помощью 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' %}
Другие вопросы по тегам