Django、Angular2、およびWebpackでバージョンコードを編集するにはどうすればよいですか？

Question

Django + Angular 2 + WebpackをDjangoで使用しています。私のアプリ（http://example.com/user/beta）をレンダリングするためのURLを作成していますので、まずindex.htmlレンダリング&インデックスには、webpackのすべてがバンドルされていますメイン、ベンダー&ポリフィルで、私の構造は、このようなものです：ここで

app 
| 
|__angular 
|  | 
|  | 
|  |___src 
|  |___typings 
|  |___package.json, tsconfig.json, webpack.config.js 
| 
| 
|__static 
|  |__css 
|  |__dist <this contains bundle files which got complied by webpack> 
| 
| 
|__templates 
|  | 
|  |___index.html 
|  |___app 
      |__<all template files> 

すべての静的ファイルには、JSファイルは、私がしなければならないことを避けるために、反映されていないので、新しい変更をキャッシュされてきているようだがCDN &に保存されてしまいました手動でバージョンmain.bundle.v.01.jsのように私のjsファイルをテストし、私はテスト/生産に展開するたびにバンドルファイルのバージョンを変更したいので、この手動作業は、私がしなければならなかったので、 webpack.configのバージョンを変更するには&をindex.htmlに置き換えますが、index.htmlはwebpackを制御できないため、webpackが角型アプリケーションコードをバージョン管理する方法を見つける必要がありますこれらのバンドルファイル&の私が使用した溶液は

https://github.com/dkarchmer/django-aws-template 

残念ながら、それはガルプ（ないのWebPACK）に基づいており、次のテンプレートに見つけることができるのindex.html

Answer 1

でそれを置き換えるが、あなたはできるはずですWebpackから同じフローを容易にエミュレートする（またはGulpに切り替える）。

基本的には、私のWebアプリケーションの一気の流れの最後のステップは、ガルプによって生成されたトップレベルのindex.htmlを変更し、テンプレートディレクトリに移動し、通常の感想を使用することです：

gulp.task('templates', ['build'],() => { 
    // Black Magic to convert all static references to use django's 'static' templatetags 
    return gulp.src(config.dist + '/*.html') 
     .pipe(replace(/href="app([/]\S*)"/g, 'href="{% static \'dist/webapp/app$1\' %}"')) 
     .pipe(replace(/src="app([/]\S*)"/g, 'src="{% static \'dist/webapp/app$1\' %}"')) 
     .pipe(gulp.dest(config.templates)); 
}); 

config.templates = '../server/templates/dist/webapp'。明らかに、あなたはまた.gitignoreこのディレクトリにする必要があります。あなたが見ることができるように、私はまだ私のローカルコンピュータ上で開発を行う際に変更する{% static %}テンプレートタグを持つことができるようにしたいので、私は基本的に、任意のhref=app/foo/bar私はこれを行うhref={% static 'dist/webapp/app/foo/bar' %}

と交換

で終わります、そして生産が生産のCDNから来たとき。

あなたは上記のDjangoのテンプレートに気づくでしょう他のものは、基本テンプレートserver/templates/base.htmlが

{% extends "dist/webapp/index.html" %} 

dist/webapp/index.htmlから延びていることがある私のガルプの流れが変更さindex.htmlをコピーした場所です。イメージソースファイルと同じです。または、あなたの流れでは、おそらく{% static %}をソースファイルに保存し、webpackでそれらを処理することができます。私の場合は

|__templates 
|  | 
|  |__dist 
|  |  | 
|  |  |__ webapp/index.html 
|  | 
|  |___base.html 

、ガルプは、厳密に流れ、スタイルシートとスクリプトの世話をするので、残りは通常のDjangoの技術を使用してbase.htmlによって行われます。私は角度を使用、まだログインして権限をレンダリングし、処理するためにはDjangoを使用していた別のプロジェクトで

、私は'dist/webapp/index.html'も組み込まれて変更されたファイルです基本的に

class AngularView(TemplateView): 
    template_name = 'dist/webapp/index.html' 

    @method_decorator(login_required) 
    def dispatch(self, request, *args, **kwargs): 
     return super(AngularView, self).dispatch(request, *args, **kwargs) 

をした単一のビューを追加し、 Gulpフローによってコピーされます（バージョン管理下ではありません）。

明らかに、（少なくともいくつかの点では）欠点は、1）Build Staticsと2）Djangoという2つのステッププロセスがあることです。しかし、私の場合は、とにかくpython manage.py collectstaticの仕組みと同じです。