webpack 강좌 2. 시작하기

티스토리 뷰

javascript/webpack

webpack 강좌 2. 시작하기

이브라히모비치 2018. 9. 7. 23:47

시작하기

웹팩은 javascript 모듈을 컴파일 하는데 사용됩니다. 설치 후 CLI나 API를 통해 웹팩을 적용할 수 있습니다. 만약 아직 웹팩에 익숙하지 않다면, 핵심개념과 다른 툴들과의 비교를 통해 왜 사용해야 하는지 알아보십시오.

기본 설정

우선 디렉토리를 만들고, npm을 초기화 하고, 로컬에 webpack과 webpack-cli(커맨드라인에서 웹팩을 실행하는 도구)를 설치해 봅시다.

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

가이드 전체에서 diff 블록을 사용해서 디렉토리, 파일, 코드의 변경사항을 보여줄 것입니다.

다음과 같은 디렉토리 구조와 파일, 컨텐츠를 볼 수 있습니다.

project

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

또한 package.json 파일을 적용해야 합니다. 패키지를 private로 만들고, main 엔트리를 삭제합니다. 이 작업은 당신의 코드가 실수로 배포되는 것을 방지해 줍니다.

만약 package.json 의 내부 동작에 대해 더 알고 싶다면, npm 문서를 읽어 보는 것이 좋습니다.

이 예제에서, <script> 태그 사이에 암시적 의존성들이implicit dependencies 존재합니다. index.js 파일이 실행되기 전 페이지에 포함된 lodash가 필요합니다. 왜냐하면 index.js 에는 lodash의 필요성이 명시적으로 선언되지 않았기 때문입니다. 단지 전역변수로 존재하는 _ 만 있을 뿐입니다.

이런 식으로 javascript 프로젝트를 관리하는데는 몇가지 문제점이 있습니다.

스크립트가 외부 라이브러리에 의존한다는 것을 즉시 알지 못합니다.
의존성이 누락되었거나 순서가 잘못되면 제대로 동작하지 않습니다.
의존성이 포함되어 있지만 사용하지 않는 경우에도, 브라우저는 불필요한 코드를 다운받게 됩니다.

대신 웹팩을 이용해서 스크립트를 관리해봅시다.

번들 만들기 Creating a Bundle

우선 디렉토리 구조를 살짝 변경할 것입니다. “소스"(source, /src) 코드와 “배포"(distribution, /dist) 코드를 분리 합니다. “소스" 코드는 우리가 만들고 수정하는 코드입니다.

“배포" 코드는 브라우저에서 로드 될 최소화minimized, 최적화optimized 된 빌드 프로세스의 최종 결과물output 입니다.

project

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

lodash의 의존성을 index.js에 적용하려면, 로컬에 라이브러리를 설치해야 합니다.

npm install --save lodash

프로덕션 번들에 패키지를 설치하려면 npm install --save 를 사용해야 합니다. 만약 개발 목적으로 사용하는 패키지(린트, 테스트 라이브러리등)를 설치하려면 npm install --save-dev를 사용하는 것이 좋습니다. 자세한 사항은 npm 문서를 참고하세요.

이제 lodash를 import 해봅시다.

src/index.js

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

이제 스크립트를 번들링 할 것이기 때문에, index.html 파일을 업데이트 해야합니다. lodash <script>를 제거하고, import 합니다. 그리고 /src에서 파일을 직접 불러오는 대신 번들 <script>를 로드합니다.

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

이 설정에서, index.js는 제공된 lodash를 명시적으로 요구 합니다. 그리고 이것은 (전역 변수를 오염시지 않는) _ 로 바인딩 됩니다. 모듈이 어떤 의존성을 필요로 하는지 설명해줌으로써, 웹팩은 이 정보를 의존성 그래프를 만드는데 이용할 수 있습니다. 그리고 그 그래프를 활용해서 스크립트가 정확한 순서로 실행되는 최적화된 번들을 생성합니다.

이제 npx webpack 을 실행해봅시다.

이것은 src/index.js 스크립트를 진입점entry point로 보고, dist/main.js 파일을 결과물output로 생성할 것입니다. npx 명령어는 Node 8.2/npm 5.2.0 이상 버전에 포함되어 있으며, 처음 설치한 웹팩 패키지의 웹팩 바이너리 (./node_modules/.bin/webpack) 를 실행합니다.

npx webpack

Hash: dabab1bac2b940c1462b
Version: webpack 4.12.0
Time: 287ms
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 216 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

결과물이 조금 다를 수 있으나, 빌드에 성공했다면 계속 진행하시면 됩니다. 또한 경고문에 대해서는 걱정하지 마세요. 추후 다뤄볼 것입니다.

모든것이 제대로 되었다면, index.html을 브라우저에서 열었을때 'Hello webpack' 이라는 문구가 보여야 합니다.

모듈 Modules

import와 export문은 ES2015에서 표준화 되었으며, 대부분의 브라우저에서 지원합니다. 몇몇 오래된 브라우저들은 여전히 뒤처져 있지만, 웹팩은 모듈들을 창의적으로 지원합니다.

사실 웹팩은 코드를 은밀하게 “트랜스파일” 합니다. 그래서 구 브라우저들도 그것을 실행할 수 있습니다. dist/main.js 를 살펴본다면, 웹팩이 어떻게 작동하는지 확인할 수 있습니다. 꽤 독창적입니다! 웹팩은 import 와 export 외에도 다양한 모듈 구문을 지원합니다. Module Api에서 더 자세한 내용을 확인할 수 있습니다.

웹팩은 import 와 export 구문 외에는 어떤 코드도 변경하지 않는다는 점에 유의하세요. 만약 ES2015의 다른 기능들을 사용하고 있다면, webpack loader system을 통해 Babel 이나 Bublé 같은 트랜스파일러를 사용해야 합니다.

구성 사용 Using a Configuration

4버전에서, 웹팩은 어떤 구성도 요구하지 않습니다. 하지만 대부분의 프로젝트들은 보다 복잡한 설정을 필요로 합니다. 이것이 웹팩이 구성 파일configuration file을 지원하는 이유입니다. 이 파일은 터미널에서 많은 명령어를 수동으로 입력하는 것보다 훨씬 효율적이기 때문에, 위에서 사용한 CLI 라인 옵션들을 대체할 수 있는 것을 하나 만들어 봅시다.

project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

이제, 다시 빌드해 봅시다. 대신 새로운 구성 파일을 사용합니다.

npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.12.0
Time: 283ms
Built at: 13/06/2018 11:53:51
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 216 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

만약 webpack.config.js 파일이 있다면 webpack 명령어는 그것을 기본으로 선택합니다. 여기서 사용된 --congif 옵션은 어떤 임의의 파일이라도 명시할 수 있습니다. 이것은 여러파일에 분리 되어야 하는 보다 복잡한 구성에서 유용합니다.

구성 파일은 간단한 CLI 사용보다 훨씬 더 많은 유연성을 제공합니다. 로더 규칙, 플러그인, 리졸브 옵션을 및 기타 여러 개선 사항들을 이 방식으로 지정할 수 있습니다. 자세한 사항은 configuration documentation 을 참고하십시오.

NPM Script

CLI를 통해 웹팩의 로컬 복사본을 실행하는 것은 그리 유쾌한 일이 아니므로, shortcut을 추가할 수 있습니다. package.json에 npm script를 추가 적용해 봅시다.

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

이제 npm run build 명령어는 위에서 사용했던 npx 를 대신해 사용할 수 있습니다. npx를 사용했던것 처럼 scripts 내부에서 로컬에 설치된 npm 패키지들을 이름으로 참조할 수 있습니다. 이런 방식은 대부분의 npm 기반 프로젝트에서 표준입니다. 왜냐하면 이것은 모든 참여자들이 (필요하다면 각각에 --config 같은 플래그가 있는) 공통 스크립트의 동일한 세트를 사용할 수 있게 하기 때문입니다.

다음 명령을 실행하여 스크립트의 별칭이 잘 동작하는지 확인하세요.

npm run build

Hash: dabab1bac2b940c1462b
Version: webpack 4.12.0
Time: 278ms
Built at: 13/06/2018 11:54:54
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 216 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/.

사용자 정의 파라미터들parameters을 2개의 대시를 사용해서 npm run build 명령어와 파라미터 사이에 전달할 수 있습니다.

(예) npm run build -- -- colors

결론

기본적인 빌드가 완성되었으므로 다음 가이드로 이동하여 이미지와 글꼴 같은 asset을 관리하는 방법을 익히세요. 이 시점에서 프로젝트는 다음과 같아야 합니다.

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

만약 npm5 를 이용하고 있다면, package-lock.json 파일도 있을 수 있습니다.

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement

저작자표시 비영리 변경금지

'javascript > webpack' 카테고리의 다른 글

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement (1)	2018.09.13
webpack 강좌 5. 개발 Development (0)	2018.09.10
webpack 강좌 4. 결과물(Output) Management (1)	2018.09.09
webpack 강좌 3. 에셋(자산) 관리 (Asset Management) (0)	2018.09.08
webpack 강좌 1 : 설치 (0)	2018.09.07

공유하기 링크

페이스북
카카오스토리
트위터

Kakao 다음웹툰 / 웹표준 및 ft기술, 웹접근성 / 세아이 아빠, 제주 거주 중..

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

Web Standard

티스토리 뷰