如何加載具有基於內容的哈希文件名作爲靜態文件在Django的webpack包？

我正在使用create-react-app爲基於django的應用程序創建前端。如何加載具有基於內容的哈希文件名作爲靜態文件在Django的webpack包？

我該如何導入由一個Django模板中的create-react-app生成的js包。

軟件包文件名採用以下格式。

main.3cf06d58.js

的問題是，每次我重新捆綁基於文件名更改內容的哈希值。這又打破了我的靜態文件導入我的Django模板

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

是否有設置自定義的WebPack包的方式在文件名創建反應的，應用程序嗎？此設置似乎不可用，因爲我沒有彈出，因此無法訪問Webpack配置文件。

來源

2017-06-27 therewillbecode

最好的解決方案是訪問webpack配置文件，並將包文件名設置爲靜態文件名。基於靜態文件內容的Hashname對於瀏覽器緩存很有用。但是，如果不需要這樣做，那麼最好的辦法就是彈出你的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腳本。

npm run build-django-static

：

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

然後從相同的目錄中的package.json運行以下命令調用腳本故宮

來源

2017-06-28 15:13:14 therewillbecode

如何加載具有基於內容的哈希文件名作爲靜態文件在Django的webpack包？

回答

相關問題