2016-08-03 1 views
0

내 프로젝트에 웹팩을 사용하고, 여기에 도구입니다 :webpack을 사용할 때 정적 파일을 생성해야합니까?

HTML로 - 옥 - HTML 로더 으로 CSS - 프로젝트 AngularJS와 작성 말대꾸 로더 - 부품 모든 & templateUrl (웹팩에서 ngTemplate-loader)

그래서 프로세스가 끝나면 1 개의 JS 파일이 있습니다. 이 모든 것들은 매우 멋지지만 클라이언트 용 정적 HTML 파일을 만드는 것이 좋을 것이라고 생각합니다. ...

성능이 향상 될 예정입니다 (캐싱/DOM 요소를 그리는 데 필요 없음). 브라우저 - 하나의 큰 JS 파일이 아닌 몇 개의 작은 파일을 다운로드하려면 ...

내가 틀렸어? 정적 인 애셋 (html, css)/캐시 파일을 생성하는 좋은 도구를 찾을 수 없습니다. 줄 끝에 - 나는 구슬 파일을 템플릿 (templateUrl)으로 Angular Component에 넣는 쉬운 방법을 찾아야하지만 파일은 정적이어야하므로 브라우저의 "Sources"에서 볼 수 있습니다.

는 설명하기 어렵다 - 그래서 나는 당신이 (= 저를 이해할 수 있기를 바랍니다

답변

1

내가 거기 있었고 내가 배운 것은 각 캐시 템플릿 빠르게 정적 후입니다입니다 또한지도를 DIST 정적 HTML 파일을 복사 할 수 있습니다.. npm cpy tool을 사용하고 있지만 각도 캐시 템플릿을 사용하는 것이 좋습니다. 옥으로 변환하는 데 사용할 수있는 this tool이 있습니다. 공급 업체 용으로 하나의 파일 만 빌드하면됩니다. 이 앱을 사용하면 응용 프로그램을 더 깨끗하게 유지할 수 있으며 필요에 따라 캐시에서 각도로로드하는 유일한 템플릿을 만들 수도 있습니다. 나는 내가 설명 할 수 있었으면 좋겠다. webpack은 많은 멋진 플러그인과 함께 마녀가 더 쉽게 삶을 만들 수 있습니다! 행운을 빌며

0

주 후에 나는 캐쉬 템플릿이 환상적이라는 데 동의합니다! =). - 모든 node_modules/bower_components/libs와 (JS + CSS)

  1. 업체 :

    나는이 개 내 응용 프로그램에 대한 파일을 생성하는 플러그인 "webpack.optimize.CommonsChunkPlugin"를 사용했다.
  2. 앱 - 모든 소스 - 컨트롤러/모델/비즈니스 로직/뷰 (js, css (sass), html (jade+ ngTemplate for angular)). 정말 멋진 일이 발견이

    entry: { 
        app: './src/app.js', 
        vendor: [ 
         "angular", 
         "angular-route", 
         ... and other libs... 
        ], 
        }, 
    

    그리고 : 같은

내 항목이 보이는 html-webpack-plugin을 -이 플러그인은 index.html 파일을 생성하고 자동으로 모든 생성 된 JS 파일을 첨부합니다.

추가 내 파일에 "해시"문자열이 사용되었습니다.

내 DIST는 다음과 같습니다 webpack.optimize.UglifyJsPlugin

/dist 
    /index.html 
    /app.xxxxxxxxx.js 
    /vendor.xxxxxxxxxx.js 

리틀 마법 모든 파일을 작게를 할 수 있습니다.

이제 경량의 작은 응용 프로그램이 배포 대기 중입니다! =)

관련 문제