コンテンツをベースにしたハッシュファイル名を持つWebpackバンドルをDjangoの静的ファイルとしてロードするには？

Question

私はcreate-react-appを使ってdjangoベースのアプリケーションのフロントエンドを作成しています。

Djangoテンプレートでcreate-react-appによって生成されたjsバンドルをインポートするにはどうすればいいですか？

バンドルファイル名の形式は次のとおりです。

main.3cf06d58.js

問題は、毎回私は、バンドルに、ファイル名の変更で内容に基づくハッシュを再構築という点です。これは、順番に作成反応するアプリでカスタムのWebPACKバンドルファイル名を設定する方法はあります私のDjangoテンプレート

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

に私の静的ファイルのインポートを壊しますか？この設定は、取り出されていないため、Webpack設定ファイルにアクセスできないため、使用できないようです。

Answer 1

ベストソリューションは、webpack構成ファイルにアクセスし、バンドルファイル名を静的ファイル名に設定することです。静的ファイルのコンテンツに基づくハッシュネームは、ブラウザのキャッシュに役立ちます。しかし、これが必要ない場合は、おそらくあなたの作成反応のアプリを取り出し、webpackの設定を調整することです。

これを行うには、反応スクリプトモジュールをフォークして調整することができます。

ウェブパックの設定に何らかの理由で触れたくない場合は、これを行う堅牢性の低い方法として、bashスクリプトを作成する方法があります。

このスクリプトは、package.jsonと同じディレクトリにあり、npm run buildコマンドの出力からバンドルのファイル名をgrepsします。次に、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 

注 - あなたの静的Djangoのディレクトリを指す正しいパスに$のoutputpath変数を変更することが重要です。

次に、このbashスクリプトを呼び出すpackage.jsonにカスタムnpmスクリプトを追加します。

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

次に、あなたのpackage.jsonと同じディレクトリから次のコマンドを実行して、NPMのスクリプトを呼び出す：

npm run build-django-static