如何在Django模板中加载在``ng build --prod''中创建的webpack捆绑包？

Leo 发表于 Dev

狮子座

我正在将Angular 4用于客户端/前端，并将django 1.11用于后端。我编辑了.angular-cli.json以将bundles输出目录重定向到Django应用程序资产

./.angular-cli.json

{
  ...
  "apps":[
     ..,
     "outDir": "django_app/assets/webpack_bundles/",
     ....
  ],
  ...
}

在构建时ng build --dev（用于开发环境），将在资产下创建webpack捆绑包

./django_app/assets/webpack_bundles

django_app/
  - assets/
    -- webpack_bundles/
      --- inline.bundle.js
      --- main.bundle.js
      --- polyfills.bundle.js
      --- vendor.bundle.js

然后运行python3 manage.py collectstatic以迁移到静态文件中并将其导入django模板中

./django_app/templates/sample.html

{%load static %}

<script src="{% static 'webpack_bundles/inline.bundle.js' %}"></script>
<script src="{% static 'webpack_bundles/polyfills.bundle.js' %}"></script>
<script src="{% static 'webpack_bundles/vendor.bundle.js' %}"></script>
<script src="{% static 'webpack_bundles/main.bundle.js' %}"></script>

问题是，如果要进行生产构建，如何在django模板上加载webpack捆绑包ng build --prod？它将创建缩小版本的捆绑包，并带有哈希值以用于缓存。

./django_app/assets/webpack_bundles

django_app/
  - assets/
    -- webpack_bundles/
      --- inline.[hash].bundle.js
      --- main.[hash].bundle.js
      --- polyfills.[hash].bundle.js
      --- vendor.[hash].bundle.js

尝试了have的解决方案ng build --prod --output-hashing none，但是由于缓存，这不是最佳实践。已尝试使用django_webpack_loader，但不适用于有角度的4 webpack.config.js

老鼠

我遇到了同样的问题。我的修复程序相当平庸。

在settings.py中：


def first(pair):
    return pair[0]


def load_webpack_bundle(static_folder):
    """
    Okay this is gross, but the alternative is hacking apart the angular.json
    build script so I can use an existing loader, which is itself kind
    of gross and makes some assumptions it'd be work to satisfy.

    The output is a dictionary of dictionaries: {extension:
    {file-name-prefix: path-to-file-in-static-dir}.

    This assumes you only have a single static file dir to checkout, but if
    you had more I think it would be starightforward to add them.
    """
    webpack_built_files = {}
    stats = os.path.join(static_folder, 'bundle', 'stats.json')

    if os.path.exists(stats):
        with open(stats) as f:
            stats = json.load(f)
            files = ['bundle/' + m['name'] for m in stats['assets']]
            by_extension = [(f.split('.').pop(), f) for f in files]
            for k, v in itertools.groupby(
                sorted(by_extension, key=first), key=first
            ):
                v = [i for i in v]
                webpack_built_files[k] = {
                    r[1].split('.')[0].split('/').pop(): r[1] for r in v
                }

    return webpack_built_files

WEBPACK_BUILT_FILES = load_weback_bundle(os.join(*PATH_TO_YOUR_DIST_DIR))

在angular.json中，在build下为您的开发和生产设置添加 "statsJson": true,

在为您的角度应用提供服务的任何视图中，添加以下上下文：

        'STATIC': settings.WEBPACK_BUILT_FILES

在您的模板中：

{% load static %}
<!doctype html>
<html>
<head>
  <!-- ... -->
  <link href="{{STATIC.css.styles}}" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
  <!-- Order matters: if you don't have runtime and polyfill before main, you will get a cryptic exception about zone.js not being incldued -->
  <script type="application/javascript" src="{% static STATIC.js.runtime %}"></script>
  <script type="application/javascript" src="{% static STATIC.js.polyfills %}"></script>
  <script type="application/javascript" src="{% static STATIC.js.main %}"></script>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。