Concepts | Webpack

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.
여기에서 JavaScript 모듈 및 webpack 모듈에 대해 자세히 확인할 수 있습니다.
webpack 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정 파일을 필요로 하지 않습니다. 하지만 사용자 요구에 따라 기대 이상으로 유연하게 설정이 가능 합니다.
다음의 핵심 개념만 이해하면 시작할 수 있습니다.
이 문서에는 위 개념의 대략적인 개요를 제공하고, 개념별로 최적화된 사용 사례를 확인할 수 있는 링크를 제공하기 위한 목적으로 작성되었습니다.
모듈 번들러의 개념과 내부에서 동작하는 방식을 더 잘 이해하려면 다음 자료를 참고하세요.
엔트리 포인트는 webpack이 내부의 디펜던시 그래프 를 생성하기 위해 사용해야 하는 모듈입니다. Webpack은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아냅니다.
기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 (또는 여러 엔트리 포인트)를 지정할 수 있습니다. 예를 들어보겠습니다.
설정 파일 없이 webpack을 실행하면 entry의 기본값은 './src'이며, webpack은 resolve.mainFiles와 resolve.extensions를 통해 이를 ./src/index.js로 해석합니다. src/ 디렉터리가 존재하더라도 해당 파일이 없으면 webpack은 다음 오류를 발생시킵니다. Module not found: Error: Can't resolve './src' in '/path/to/project' 오류에 './src'가 표시되는 이유는 그것이 실제 엔트리 요청이기 때문입니다. index.js는 그 안에서 검색되는 기본 파일일 뿐입니다. 다른 엔트리 파일 이름을 사용하려면 위 예시와 같이 webpack.config.js를 추가하세요.
엔트리 포인트 섹션에서 자세히 알아보세요.
output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다. 기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다.
다음과 같이 설정에서 output 필드를 지정할 수 있습니다.
위의 예제에서, output.filename과 output.path 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주었습니다. 상단에서 가져오는 path 모듈이 무엇인지 궁금할 수 있는데, 이것은 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈입니다.
output 속성에는 설정 가능한 더 많은 기능이 있습니다. 그 밖의 개념에 대해 더 배우고 싶다면, 출력 을 읽어보세요.
webpack은 기본적으로 JavaScript, JSON, WebAssembly 파일을 이해하며, 기본적으로 활성화된 내장 지원(Native CSS, Native HTML)을 통해 CSS와 HTML도 처리합니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가할 수 있습니다.
webpack의 특정 기능 중 하나인 모든 유형의 모듈(예: .css)을 import 하는 기능은 다른 번들러나 태스크 러너에서 지원하지 않을 수 있습니다. 개발자들에게 더욱 정확한 디펜던시 그래프를 생성하는 데 도움을 주기 때문에 이러한 언어의 확장이 필요하다고 생각합니다.
상위 수준에서 로더는 webpack 설정에 두 가지 속성을 가집니다.
위 설정에서는 test와 use라는 두 가지 필수 속성을 가진 하나의 모듈을 위해 rules 속성을 정의했습니다. 이는 webpack의 컴파일러에 다음과 같이 말합니다.
"Webpack 컴파일러야, require()나 import 문 안에서 '.js' 파일로 해석되는 경로를 만나면, 번들에 추가하기 전에 babel-loader를 사용해서 변환해 줘."
webpack 설정에서 규칙을 정의할 때 rules가 아닌 module.rules 아래에 정의한다는 것을 기억하세요. 당신의 편의를 위해 webpack은 잘못 정의한 경우에 경고를 합니다.
정규식을 사용하여 파일을 매칭할 때 따옴표를 사용하지 않도록 주의하세요. 즉, /\.txt$/는 '/\.txt$/' 또는 "/\.txt$/"와 같지 않습니다. 전자는 webpack에 .txt로 끝나는 모든 파일과 일치하도록 지시하고 후자는 webpack에 절대 경로 '.txt'를 가진 단일 파일과 일치하도록 지시합니다. 이는 당신의 의도한 것이 아닐 가능성이 높습니다.
더 상세한 사용자 지정 설정에 대해서는 로더에서 확인하실 수 있습니다.
로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다.
플러그인 인터페이스를 사용하여 webpack의 기능을 확장하는 방법을 확인해보세요.
플러그인을 사용하려면 import 연산자를 사용하여 플러그인을 가져온 다음 plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있습니다. 하나의 구성에서 여러 용도로 플러그인을 여러 번 사용할 수 있으므로 new 연산자를 사용하여 플러그인의 인스턴스를 생성해야 합니다.
위 예제에서 ProgressPlugin은 빌드 진행 상황의 보고 방식을 설정합니다. src/index.html이 엔트리이므로 webpack은 해당 파일이 참조하는 script와 style을 번들링하고 URL을 빌드된 파일 이름으로 재작성합니다. 페이지 생성에는 plugin이 필요하지 않습니다. Native HTML을 참고하세요.
webpack은 설치 없이 사용할 수 있는 많은 플러그인을 제공합니다! plugin 목록을 확인해보세요.
webpack 설정에서 플러그인을 사용하는 것은 간단하지만, 추가로 실제 사용 사례들도 살펴볼만한 가치가 있습니다. 여기에서 자세히 알아보세요.
mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다. 기본값은 production 입니다.
여기에서 모드 구성에 대해 자세히 알아보고 각 값에서 어떤 최적화가 수행되는지 알아보세요.
Webpack은 ES5가 호환되는 모든 브라우저를 지원합니다(IE8 이하는 지원되지 않습니다). Webpack은 import() 및 require.ensure()을 위한 Promise를 요구합니다. 구형 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 폴리필을 로드해야 합니다.
Webpack 5에는 Node.js 버전 10.13.0 이상이 필요합니다.
저작권은 OpenJS Foundation 및 webpack 기여자에게 있으며, 모든 권리는 보호됩니다. OpenJS Foundation은 등록 상표를 보유하고 있으며 상표를 사용합니다. OpenJS Foundation의 상표 목록은 Trademark Policy와 Trademark List에서 확인할 수 있습니다. OpenJS Foundation 상표 목록에 표시되지 않은 상표 및 로고는 각 소유자의 상표™ 또는 등록 상표®입니다. 이를 사용한다고 해서 해당 소유자와의 제휴 관계나 보증을 의미하지는 않습니다.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy