使用 Django 设置 Webpack答案

【问题标题】：Webpack setup with Django使用 Django 设置 Webpack
【发布时间】：2018-09-15 21:59:29
【问题描述】：

我通过 django-webpack-loader 在 Django 中开发一个 Vue 应用程序，在本地运行我可以通过在我的 base.html 文件中使用以下内容来使其工作：

{% load render_bundle from webpack_loader %}
...
...
{% render_bundle 'app' %}

但是，在生产中这不起作用 - 我相信因为 webpack 生产配置使用 CommonChunksPlugin 将包拆分为 app、manifest 和 vendor。

关于将 Webpack 与 Django 合并的在线文档并不多 - 我想知道是否有一种方法可以在 Django 模板中包含所有块。

【问题讨论】：

django-webpack-loader 不再维护。我一直在努力寻找它的替代品，它开始受到关注，我绝对建议尝试一下：github.com/shonin/django-manifest-loader

标签： django webpack django-webpack-loader

【解决方案1】：

问题最终是由于代码拆分。在 dev 中，创建了一个 JS 文件，但在生产配置中，Webpack CommonChunksPlugin 被配置为将应用拆分为 3 个文件（清单、供应商和应用）。

此解决方案并不理想，可能无法很好地扩展，但通过在 Django 模板中放置条件标记，我能够正确引用必要的文件。

{% if STAGE or PRODUCTION %}
  {% render_bundle 'vendor' 'js' %}
  {% render_bundle 'manifest' 'js' %}
{% endif %}

{% render_bundle 'app' 'js' %}

【讨论】：

【解决方案2】：

您是否编辑了 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 来指向chunk？ https://github.com/jantimon/html-webpack-plugin/blob/master/README.md#writing-your-own-templates

plugins: [
    new HtmlWebpackPlugin({
      template: 'static/app/index.html'
    }), 
]

【讨论】：

我确实对此进行了研究，但是在 Django 的 collectstatic 命令向文件添加散列时，我将无法使用 Webpack 注入正确的文件，这就是 django-webpack-loader进来。