Webpack : 장고와 함께 사용하기위한 index.html 생성

장고 애플리케이션의 모든 각도 코드 인 각도 4/장고 애플리케이션이 있습니다. 각도 앱은 webpack을 사용하여 제작되었습니다.Webpack : 장고와 함께 사용하기위한 index.html 생성

.js 번들을 "정적"폴더에, "index.html"파일을 "템플릿"폴더에 출력하려면 webpack을 사용하고 싶습니다. 여기

{% load static %} 

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

가 project 최상위이 들고 내 디렉토리 구조 (간결함을 위해 생략 일부 파일)입니다 : 주입 된 <script></script> 태그는 장고의 "정적 파일"표기법을 사용하도록 업데이트해야합니다 장고 프로젝트.

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가 제공하는 현재 "templates/index.html"파일입니다. 이것은 정상적으로 작동합니다. 가능하다면 webpack에서이 파일을 생성하고 싶습니다. 왜냐하면 dis 파일의 이름을 지정하는 데 [hash]를 사용하고 자동으로 업데이트해야하기 때문입니다. 따라서 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

웹팩 템플리트를 생성 html-webpack-plugin을 이용한다. 나는 장고 템플리트와 함께 webpack.config.js를 사용하는 임시 해결책을 발견했다.

Angular2/4/5/other는 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>

당신은 청소하기 위해 장고의 python manage.py collectstatic --clear 모든 웹팩 빌드 후를 (실행해야합니다

'정적'폴더).

출처

2018-02-02 17:23:16 djangulo

Webpack : 장고와 함께 사용하기위한 index.html 생성

답변

관련 문제