Webpack 사용방법과 기능 요점 정리

하늘네트 + openhub·2022년 9월 10일
1

개발자 팁

목록 보기
7/7
post-thumbnail
post-custom-banner

Webpack의 정의와 사용방법 요점 정리 – part 2

Webpack 설정과 사용 방법은 아주 다양할 수 있지만 이 글에서는 가장 보편적인 사용법과 핵심만 중점으로 짚어 보도록 하겠다.

<– 웹팩이 무엇인지 궁금하신 분은 여기: 웹팩 1편 (Webpack 정의와 필요성, 그리고 장단점)

인스톨

우선 Webpack을 인스톨하고 (물론 노드와 npm 이미 상주라고 가정하에; 참고로 Webpack 5를 실행하려면 최소 Node.js 버전 10.13.0(LTS)이 필요)

npm i webpack webpack-cli webpack-dev-server -D

이것이 Webpack 인스톨의 가장 간소한 핵심이라고 본다. 사실 웹팩은 configuration 없이도 실행가능하다. 그럴 경우에 webpack은 프로젝트의 엔트리 포인트를 src/index.js으로 가정하고, 프로덕션을 번들을 dist/main.js로 내보낸다. 하지만 이에 대한 실제 이용도와 현실성은 의문이니 그냥 알고만 있자.

Config 파일들 조정

configuration 조정은 두 군데에서 할 수 있다: package.json & webpack.config.js

@package.json

"scripts": {
     "build": "webpack", 
     "dev": "webpack serve"
  }, ...

@webpack.config.js

Webpack.config.js 파일을 root 디렉토리에 만들고 설정 시작한다. 웹팩 설정이 정확히 동일한 경우는 없지만 다음과 같은 핵심 요소들이 있다.

  • Entry(엔트리)
  • Output(출력)
  • Loaders(로더)
  • Plugins(플러그인)
  • devServer와 devtool 그리고 mode

Webpack config 파일 구조 분석을 통한 4가지 주요 속성 이해

.. 나머지는 👉 [@hanl.tech] 에서 ... (https://www.hanl.tech/blog/webpack-%ec%82%ac%ec%9a%a9%eb%b0%a9%eb%b2%95%ea%b3%bc-%ea%b8%b0%eb%8a%a5-%ec%9a%94%ec%a0%90-%ec%a0%95%eb%a6%ac/)

profile
The Future is OPEN.
post-custom-banner

0개의 댓글