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

Question

我正在使用 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 配置文件。

Answer 1

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

要使用 create-react-app，可以分叉 react-scripts 模块并进行这样的调整。

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

此脚本与您的 package.json 位于同一目录中，并从 npm 运行构建命令的输出中获取捆绑包的文件名。然后将 css 和 js 包复制到各自 css 和 js 目录下的 django 静态文件夹。

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 脚本添加到您的 package.json 中，它会调用此 bash 脚本。

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

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

npm run build-django-static

Answer 2

可能保留 'hashed names' 并避免缓存问题的最佳选择是使用 django-webpack-loader and webpack-bundle-tracker.

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

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

两个插件的作者in this post对如何完成有一个完整的解释。

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

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

How to load webpack bundle which has content based hash filename as static file in Django?

python

django

webpack

create-react-app