Webpack 시작하기 [예제 프로젝트 포함]

웹팩 ~이다. 모듈 번들러 복잡한 자바 스크립트 응용 프로그램을 쉽게 만들 수 있습니다. 그것은 React 커뮤니티가 주요 빌드 도구로 선택한 이후 심각한 영향력을 얻었습니다. 웹팩 패키지 매니저도 태스크 러너도 아니다. 다른 (좀 더 진보 된) 접근법을 사용하기 때문에, 그 목표는 또한 동적 빌드 프로세스 설정.

Webpack은 바닐라 자바 ​​스크립트와 함께 작동합니다. 당신을 위해 그것을 사용할 수 있습니다 애플리케이션의 정적 애셋 번들, 이미지, 글꼴, 스타일 시트, 스크립트 등을 하나의 단일 파일로 모든 의존성 돌보기.

Webpack은 단순한 응용 프로그램이나 웹 사이트를 만드는 데 필요하지 않습니다. 예를 들어 자바 스크립트 1 개와 CSS 파일 1 개와 이미지 몇 개가있는 경우와 같이 웹 패키지를 구해줄 수는 있습니다. 여러 애셋과 종속성을 가진보다 복잡한 애플리케이션.

Webpack 대 작업 주자 대 Browserify

그래서, 어떻게 Webpack 스택 다른 빌드 도구와 비교 Grunt, Gulp 또는 Browserify와 같은?

그 루트와 꿀꺽 꿀꺽 마는 사람은 작업 주자입니다. 설정 파일에서 업무를 지정하다, 작업 주자가 실행합니다. 그만큼 작업 주자의 워크 플로 기본적으로 다음과 같이 보입니다.

그러나 Webpack은 모듈 번들러 전체 프로젝트를 분석하는, 의존성 트리를 설정한다., 과 번들 된 JavaScript 파일을 만듭니다. 브라우저에 서비스하는.

Browserify는 작업 주자보다 Webpack에 더 가깝습니다. 의존성 그래프를 만든다. 그러나 그것은 단지 그렇게한다. 자바 스크립트 모듈 용. Webpack은 한 걸음 더 나아가 소스 코드를 묶을뿐만 아니라 다른 자산들 이미지, 스타일 시트, 글꼴 등.

더 많은 것을 알고 싶다면 Webpack을 다른 빌드 도구와 비교하는 방법, 나는 당신에게 2 개의 기사를 추천한다 :

1. 앤드류 레이 Webpack : 언제 사용하고 왜 사용해야합니까? 자기 블로그에
2. 코리 하우스 Browserify 대 Webpack on freeCodeCamp (멋진 일러스트레이션 포함)

위의 두 그림은 Pro React 핸드북의 Webpack 자료, 다른 가치있는 리소스.

Webpack의 4 가지 핵심 개념

Webpack은 가지고있다. 네 가지 기본 구성 옵션 “핵심 개념” 개발 프로세스에서 정의해야 할 사항은 다음과 같습니다.

1. 기입 - 그만큼 출발점 종속성 그래프 (하나 이상의 JavaScript 파일).
2. 산출 - 원하는 파일 번들 출력 (하나의 자바 스크립트 파일).
3. 로더 - 자산에 대한 변환 Webpack 모듈로 변환 그들이 할 수 있도록 의존성 그래프에 추가됨. 예를 들어, CSS 로더 CSS 파일 가져 오기에 사용됩니다..
4. 플러그인 - 맞춤 동작 및 기능 번들에서 수행. 예를 들어, i18n-webpack-plugin 번들에 현지화를 삽입한다..

로더는 파일 단위로 작업합니다. 컴파일이 일어나기 전에. 번들 코드에서 플러그인이 실행됩니다., 컴파일 과정의 마지막에.

Webpack 설치

에 Webpack 설치, 명령 줄을 열고 프로젝트 폴더로 이동 한 후 다음 명령을 실행하십시오.

 npm init 

스스로 구성하고 싶지 않다면 npm을 만들 수 있습니다. ~을 채우다 package.json 기본값을 가진 파일 다음 명령을 사용하십시오.

 npm init -y 

다음으로 Webpack을 설치하십시오.

 npm은 webpack --save-dev를 설치합니다. 

기본값을 사용했다면 이것이 당신의 package.json 파일은 지금과 같이 보일 것입니다 (특성은 다른 순서로있을 수 있습니다).

  "name": "_tests", "version": "1.0.0", "description": "", main ":"webpack.config.js ","dependencies ": "webpack ":"^ 3.6 . "", "devDependencies":  "webpack": "^ 3.6.0", "scripts":  "test": "echo \"오류 : 테스트가 지정되지 않았습니다 \ "&& exit 1", "keywords ": [],"author ":" ","license ":"ISC " 

구성 파일 만들기

당신은 webpack.config.js 파일 프로젝트의 루트 폴더에있다.. 이 구성 파일은 중요한 역할을합니다. 4 가지 핵심 개념 정의 (진입 점, 출력, 로더, 플러그인).

그만큼 webpack.config.js 파일 구성 객체를 보유하고있다. 어떤 속성을 지정해야하는지 알려줍니다. 이 기사에서는 다음 네 가지 속성을 지정합니다. 4 가지 핵심 개념에 해당한다. (기입, 산출, 기준 치수, 과 플러그인)하지만 config 객체에는 다른 속성이 있습니다..

1. 진입 점을 만듭니다.

너는 가질 수있다. 하나 이상의 진입 점. 당신은 그들을 정의해야합니다 기입 재산.

다음 코드 스 니펫을 webpack.config.js 파일. 그것 하나의 엔트리 포인트를 지정한다.:

 module.exports = entry : "./src/script.js"; 

둘 이상의 엔트리 포인트를 지정하려면 다음을 사용할 수 있습니다. 배열 또는 객체 구문.

프로젝트 폴더에서, 새 것을 창조하다 src 폴더 및 script.js 그 안에 파일. 이게 너의 진입 지점. 테스트 목적으로 끈을 놓다 이것 안에. 나는 다음 중 하나를 사용했다. (그러나 당신은 더 흥미로운 것을 사용할 수도있다.)

 const greeting = "안녕하세요, 저는 Webpack 시동기 프로젝트입니다."; document.write (greeting); 

2. 출력 정의

너는 가질 수있다. 오직 하나의 출력 파일. Webpack은 모든 자산을이 파일에 묶습니다. 다음을 구성해야합니다. 산출 다음과 같은 방법으로

 const path = require ( "path"); module.exports = entry : "./src/script.js", 출력 : 파일 이름 : "bundle.js", 경로 : path.resolve (__ dirname, 'dist'); 

그만큼 파일 이름 속성은 번들 파일의 이름, 동안 통로 재산 디렉토리 이름을 지정합니다.. 위의 예는 /dist/bundle.js 파일.

의무는 아니지만, 사용 path.resolve () 방법 당신이 정의 할 때 통로 재산으로서 정확한 모듈 분해 보장 (출력의 절대 경로는 다른 환경의 다른 규칙에 따라 생성되며 모듈 해상도는이 불일치를 해결합니다). 사용하는 경우 path.resolve, 너는 ~해야 해. 요구하다 그만큼 통로 노드 모듈 맨 위에 webpack.config.js 파일.

3. 로더를 추가하십시오.

에 로더 추가, 당신은 기준 치수 재산. 아래에 바벨 로더 ~ 할 수있는 ECMAScript 6 기능을 안전하게 사용하십시오. JS 파일에서

 const path = require ( "path"); module.exports = entry : "./src/script.js", 출력 : 파일 이름 : "bundle.js", 경로 : path.resolve (__ dirname, 'dist'), 모듈 : rules : [test : /\.js$/, exclude : / (node_modules | bower_components) /, 사용 : loader : "babel-loader", 옵션 : presets : [ "env"]; 

구성이 어려워 보일 수 있지만 복사하여 붙여 넣기 한 것입니다. 바벨 로더 설명서. 대부분의 로더는 readme 파일이나 문서와 함께 제공되기 때문에 (거의) 항상 올바르게 구성하는 방법을 알 수 있습니다. 또한 Webpack 문서에는 다음을 설명하는 페이지가 있습니다. 구성 방법 module.rules.

추가 할 수 있습니다. 필요한만큼의 로더, 여기에 전체 목록이 있습니다. 참고로 npm으로 각 로더를 설치하십시오. 그 (것)들을 일하기 위하여. Babel 로더의 경우 npm을 사용하여 필요한 Node 패키지를 설치해야합니다.

 npm install --save-dev babel-loader babel-core babel-preset-env webpack 

당신이 package.json 파일을 보면 npm이 표시됩니다. 세 가지 바벨 관련 패키지를 devDependencies 재산, 이것들은 ES6 컴파일을 처리 할 것입니다..

4. 플러그인을 추가하십시오.

에 플러그인을 추가하십시오., 당신은 플러그인 재산. 또한, 요구하다 플러그인 하나씩, 외부 모듈이므로.

이 예에서는 두 개의 Webpack 플러그인을 추가합니다. HTML Webpack 플러그인 그리고 미리로드 Webpack 플러그인. Webpack에는 멋진 플러그인 생태계, 여기에서 전체 목록을 탐색 할 수 있습니다..

플러그인을 노드 모듈로 요구하려면, 두 개의 새로운 상수 생성: HtmlWebpackPlugin 과 PreloadWebpackPlugin 과 사용 require () 기능.

 const path = require ( "path"); const HtmlWebpackPlugin = require ( "html-webpack-plugin"); const PreloadWebpackPlugin = require ( "preload-webpack-plugin"); module.exports = entry : "./src/script.js", 출력 : 파일 이름 : "bundle.js", 경로 : path.resolve (__ dirname, 'dist'), 모듈 : rules : [test : /loader : "babel-loader", 옵션 : presets : [ "env"], 플러그인 : [새 HtmlWebpackPlugin] (), new PreloadWebpackPlugin ()]; 

로더의 경우와 마찬가지로 npm으로 Webpack 플러그인을 설치하십시오.. 예제에서 두 개의 플러그인을 설치하려면 명령 줄에서 다음 두 명령을 실행하십시오.

 npm은 html-webpack-plugin을 설치합니다. --save-dev npm install --save-dev preload-webpack-plugin 

당신이 package.json 지금 파일을 보면 npm이 보일 것입니다. 두 개의 플러그인을 devDependencies 재산.

Webpack 실행

에 의존성 트리를 만든다. 과 번들 출력, 명령 행에서 다음 명령을 실행하십시오.

 웹팩 

일반적으로 1 ~ 2 분이 소요됩니다. Webpack이 프로젝트를 빌드합니다. 끝나면 CLI에도 비슷한 메시지가 표시됩니다.

모든 것이 제대로 된 경우 Webpack 창조 한 dist 폴더 프로젝트 루트에서 두 묶음 파일 배치bundle.js 과 index.html) 이것 안에.

Github 레포

프로젝트 전체를 체크 아웃하거나 다운로드하거나 포크하려면 Github repo를 살펴보십시오..