Webpack：Djangoで使用するためのindex.htmlを生成

私はAngular 4/Djangoアプリケーションを持っています。すべての角度コードはDjangoアプリケーションにあります。角度アプリはwebpackを使用して構築されています。Webpack：Djangoで使用するためのindex.htmlを生成

私はwebpackに.jsバンドルを "static"フォルダに、 "index.html"ファイルを "templates"フォルダに出力したいと思います。ここで

{% load static %} 

<script type="text/javascript" src="{% static 'dist/polyfills.js' %}"></script>

はprojectはトップレベルの保持している私のディレクトリ構造（簡略化のために省略し、いくつかのファイル）、次のとおりです。注入され<script></script>タグもDjangoの「静的ファイル」の表記を使用するように更新する必要がありますDjangoプロジェクト。

project 
    + angular 
     + app (angular application root) 
      + config 
      + node_modules 
      + src 
      - webpack.config.js 
     + static 
      + dist (webpack output folder) 
       - app.[hash].js 
       - vendor.[hash].js 
       - polyfills.[hash.js 
       - index.html 
     + templates 
       - index.html

注：私は、私は非常に簡単にindex.htmlをを移動/コピーすることができます知っているが、私はまた、Djangoの静的ファイルを使用するタグを必要としています。

説明のために。 Djangoが提供する現在の "templates/index.html"ファイルがここにあります。これはそのまま動作します。私はdisファイルの命名に[ハッシュ]を使い、ここに自動的に更新したいので、可能であればwebpackにこのファイルを生成させたいと思います。だからapp.[hash].js、vendor.[hash].js、polyfill.[hash].jsと私の角型アプリケーションがwebpackによって構築されたときにDjangoテンプレートが更新されます。

テンプレート/ index.htmlを

{% load static %} 
    <html> 
     <head> 
      <base href="/"> 
     <title>App</title> 
     <link href="{% static 'dist/app.css' %}" rel="stylesheet"> 
     </head> 
     <body> 

     <my-app>Loading...</my-app> 


     <script type="text/javascript" src="{% static 'dist/polyfills.js' %}"></script> 
     <script type="text/javascript" src="{% static 'dist/vendor.js' %}"></script> 
     <script type="text/javascript" src="{% static 'dist/app.js' %}"></script> 

    </body> 

</html>

出典

2017-10-05 Codewise

これは間違った方法です。 index.htmlは、Djangoによってレンダリングされた後、Angularによって使用されるテンプレートでなければなりません。 –

はい、私は理解しており、それは現在どのように実装しているのですか。私が達成したいのは、webpackがDjango用のテンプレートファイルを生成して、名前に[ハッシュ]を持つバンドルを生成できるようにすることです。djangoはファイル名を認識します。 – Codewise

WebPACKのテンプレートを生成するhtml-webpack-pluginを使用しています。私は回避策を見つけました（それはハッキリに感じられ、確かに作業の余分な層です）、djangoテンプレートと共にwebpack.config.jsを使用します。

Angular2/4/5 /何でもwebpackの設定にアクセスできないことに注意してください。それを抽出するにはng eject（this answerを参照）を使用してください。以下のwebpack.config.jsは、変更された抜粋です。

免責事項 Webpack + Djangoプロジェクトでこれを使用したことがあります。 Angular2のデフォルトのWebpack設定を変更すると、巨大なウサギの穴のように見えます。これを避け、Django Rest Framework + Angular2を使用して、バックエンドとフロントエンドを完全に分離することをお勧めします。しかし、それぞれ自分自身に私は推測する。以下の私のソリューションです：次に

// webpack.config.js 
// ... 
const HtmlWebpackPlugin = require('html-webpack-plugin'); // should already be here, 
              // but it's the main player of this excerpt 

module.exports = { 
    // ... 
    "entry": { 
     "main": ["./src/main.ts"], 
     "polyfills": ["./src/polyfills.ts"], 
     "styles": ["./src/assets/css/styles.css"] 
    }, 
    "output": { 
     "path": path.join(process.cwd(), "dist"), 
     "filename": "[name].bundle.js", 
     "chunkFilename": "[id].chunk.js", 
     "publicPath": '/'    // <- this is new 
    }, 
    // ... 
    "plugins": [ 
     // ... 
     new HtmlWebpackPlugin({ 
      "template": "./templates/index.html", // <- path to your template 
      "filename": "./path/of/output/file.html", // <- output html file 
               // default is './index.html' 
      "inject": false // <- this allows you to place the static files 
          // where you want them 
    // ...

# my_project.settings.py 
# ... 
# assuming your angular and django projects share the same base dir 
STATIC_ROOT = os.path.join(BASE_DIR, 'static') 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'src'), # <- this is webpack's output dir 
)

は、その後、あなたのテンプレート

<!-- templates/index.html --> 
{% load static %} 
<html> 
    <head> 
    <base href="/"> 
    <title>App</title> 
    <link href="{% static 'dist/app.css' %}" rel="stylesheet"> 
    </head> 
    <body> 
    <my-app>Loading...</my-app> 
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.polyfills.entry' %}"></script> 
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.vendor.entry' %}"></script> 
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.app.entry' %}"></script> 

    </body> 

</html>

にあなたはDjangoのpython manage.py collectstatic --clearすべてのWebPACKのビルド後に実行する必要があります（きれいにするために、 '静的'フォルダ）。

出典

2018-02-02 17:23:16 djangulo

Webpack：Djangoで使用するためのindex.htmlを生成

答えて

関連する問題