如何在 Django 中加载具有基于内容的哈希文件名的 webpack 包作为静态文件？答案

【问题标题】：How to load webpack bundle which has content based hash filename as static file in Django?如何在 Django 中加载具有基于内容的哈希文件名的 webpack 包作为静态文件？
【发布时间】：2017-11-30 14:26:46
【问题描述】：

我正在使用 create-react-app 为基于 django 的应用程序创建前端。

如何在 Django 模板中导入 create-react-app 生成的 js 包。

包文件名的格式如下。

main.3cf06d58.js

问题是每次我重建捆绑包时，都会根据文件名中的内容更改哈希。这反过来又破坏了我在 Django 模板中的静态文件导入

<script type='text/javascript' src='{% static 'js/bundle/main.c86ade78.js' %}'></script>

有没有办法在 create-react-app 中设置自定义 Webpack 包文件名？此设置似乎不可用，因为我没有弹出，因此无权访问 Webpack 配置文件。

【问题讨论】：

标签： python django webpack create-react-app

【解决方案1】：

保留“散列名称”并避免缓存问题的最佳选择可能是使用django-webpack-loader 和webpack-bundle-tracker。

第一个为 django 模板提供了几个新标签，例如 {% render_bundle 'main' %}。此标签将在运行时替换为您在 webpack 配置中定义的捆绑的 main 入口点的路径。

第二个是一个 webpack 插件，它输出一个 json 文件到磁盘，其中包含一些关于包的信息，比如实际的“散列文件名”。这个 json 被 django-webpack-loader 读取以找出文件名。

这两个插件的作者都对如何完成in this post 进行了完整的解释。

有关更多信息，您可以查看以下系列帖子：

【讨论】：

【解决方案2】：

最好的解决方案是访问 webpack 配置文件并将包文件名设置为静态文件名。基于静态文件内容的哈希名对于浏览器缓存很有用。但是，如果不需要这样做，您最好的选择可能是退出您的 create-react-app 并调整 webpack 配置。

对于 create-react-app 来说，这可以派生 react-scripts 模块并进行这样的调整。

如果您出于某种原因不想接触 webpack 配置，则另一种不太可靠的方法是创建 bash 脚本。

此脚本与您的 package.json 位于同一目录中，并从 npm run build 命令的输出中 greps 包的文件名。然后将 css 和 js 包复制到相应 css 和 js 目录下的 django static 文件夹中。

build-django-static.sh

#!/usr/bin/env bash
for bundle in $(npm run build | grep -o 'build\/static\/\S*')
do
  filename=$(basename "$bundle")
  extension="${filename##*.}"
  outputpath=../core/static/${extension}/bundle.${extension}
  cp $bundle $outputpath
  echo copied $bundle to $outputpath
done

注意 - 将 $outputpath 变量更改为指向静态 django 目录的正确路径至关重要。

然后将自定义 npm 脚本添加到调用此 bash 脚本的 package.json 中。

"scripts": {
   ...
   "build-django-static": "bash ./build-django-static.sh"
   ...
}

然后通过从与您的 package.json 相同的目录运行以下命令来调用 npm 脚本：

npm run build-django-static

【讨论】：