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 run build命令的输出中获取包的文件名。然后将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

可能是保留＆＃39;哈希名称的最佳选择＆＃39;并避免缓存问题是使用django-webpack-loader和webpack-bundle-tracker。

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

第二个是一个webpack插件，它向磁盘输出一个json文件，其中包含有关捆绑包的一些信息，例如实际的＆＃34;哈希文件名＆＃34;。这个json由django-webpack-loader读取，以找出文件名。

从插件的作者那里可以完整地了解如何完成in this post。

有关详细信息，请查看以下系列帖子：

如何在Django中加载基于内容的hash filename作为静态文件的webpack bundle？

2 个答案: