Webpack 및 사용자 지정 스크립트로드

Question

내 인생에서 webpack 작동 방식을 이해하지 못합니다. 제발 누군가 나를 도울 수 있어요. 내 상황에 대해 설명 하겠지만 실제로 웹팩을 사용하는 방법에 대한 개념적 질문이 더 많습니다.

그래서 webpack 스타터로 각도 2 프로젝트에서 작업하고 있습니다. AWS (API-Gateway 용 SDK)에서 가져온 js 스크립트가 있습니다. 약 10 개의 js 파일. 현재 나는 그 index.html에 열거 된 10 개의 파일들을 가지고 있으며, 그것은 훌륭하게 작동한다. 분명히 이것은 실제로는 크지 않습니다. 왜냐하면 그것들을 수집하기 위해 서버로가는 10 라운드 트립을 의미하기 때문입니다. 그래서 번들로 그들을 포함시키기 위해 웹팩을 얻으려는 나의 여정이 시작됩니다.

그래서 제가 시도한 것은 필자의 주요 타이프 스크립트 파일에서 하나씩 파일을 가져 오는 것이 었습니다. 내 앱이 부트 스트랩되는 파일입니다. 예를 들면 다음과 같습니다.

import 'assets/aws-sdk/lib/axios/dist/axios.standalone.js'; 
import 'assets/aws-sdk/lib/CryptoJS/rollups/hmac-sha256.js'; 
import 'assets/aws-sdk/lib/CryptoJS/rollups/sha256.js'; 
... 

이 작업은 원격으로 수행 할 수도 있습니다. 이 doesnt 일. CryptoJS가 필요없는 파일에서 사용할 수없는 CryptoJS에 대해 불평합니다. 내가 가져 오는 파일에는 일부 crypto-js 파일이 있으며, 'CryptoJS'변수를 사용하는 파일은 보이지 않습니다.

나는 그래서 내가 암호화가 그 필요 생각 추가이

new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    /*CryptoJS: 'CryptoJS'*/ 
}), 

같은 jQuery를로드하는 것 같다 ProvidePlugin을 config (설정) 내 웹팩에서 발견. 작동하지 않습니다.

내 질문은 여기 있습니다. 내가 내부적으로 사용할 필요가있는 JS 파일은 다음과 같이 일을 할 수있는 변수라는 CryptoJS를 사용

된 index.html에있는 모든 스크립트를 포함하여 잘 작동하지만 어떻게 내가 내 웹팩 응용 프로그램은 어떤 것을 이해받을 수 있나요

function hash(value) { 
    return CryptoJS.SHA256(value); 
} 

방법. 이 파일들을 어떻게 가져오고 묶을 수 있으며, CryptoJS와 같은 파일들에 varable 내부를 어떻게 사용할 수 있습니까?

Answer 1

고투의 시간 이후로 나는 그것을 알아낼 수 있었다. 내가하고 있던 가져 오기합니다 (index.html을에 추가의 상응하는) 글로벌 공간으로 JS 파일을 추가, 잘못 해당 스크립트 로더가 마법을 수행하므로

require('script!./assets/aws-sdk/lib/axios/dist/axios.standalone.js'); 

처럼 그들을 가져 오는 것입니다. Youll은 프로젝트 에서뿐만 아니라 npm