웹팩 기본 & webpack.config.js 설정

웹팩 기본 사용법 (CLI)

웹팩은 자바스크립트 모듈 번들러로 웹 개발을 도와주는 많은 부가기능을 포함하고 있다.

• 웹 팩의 기본 디렉터리 구조 (기본 디렉터리 구조만 알아라)

webpack-example
|- /dist
  |- main.js
|- /src
  |- time.js
  |- index.js
|- index.html
|- package.json
|- /node_modules

 

전통적인 웹사이트에서는 HTML 파일에 <script src="" /> 이런 방식으로 자바스크립트 파일을 가져다 쓰기 때문에 HTML 파일 없이는 정상적으로 작동할 수 없다.( HTML 파일에서 외부 자바스크립트 라이브러리에 대한 의존성 관리) 또한, 외부 라이브러리를 추가적으로 사용할 때 javascript 파일이 아닌 HTML 파일을 수정해줘야 하는 단점도 있다. 

--> 외부 모듈 임포트 기능을 통해 해결한다. (Node.js 패키지 매니저인 npm, yarn)

브라우저는 ES6의 import 키워드를 해석할 수 없다. 따라서 이 문제를 webpack을 통해 해결한다.

 

$ npm init -y
Wrote to C:\workspace\webpack-example\package.json:

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Webpack과 Webpack CLI.

webpack은 웹팩의 핵심 패키지이며 webpack-cli는 터미널에서 webpack 커맨드를 실행할 수 있게 해주는 커맨드라인 도구입니다. 두 개의 패키지 모두 개발할 때만 필요한 의존성이기 때문에 -D 옵션을 사용

 

-> 웹팩은 소스 코드의 모듈 간의 의존관계를 트리로 구성하여 하나의 번들 파일로 제공한다. 따라서 HTML 파일은 이 최종 펀들 파일만 참조할 수 잇고 이것이 바로 웹팩이 가져다주는 강점

 

https://www.daleseo.com/webpack-basics/

웹팩(Webpack) 기본 사용법 (CLI)

 

웹팩 기본 설정법

webpack.config.js(웹팩 설정파일)

설정			용도
entry		입력 파일 경로
output		출력 디렉터리와 파일 이름
module > 	rules	로더 등록
plugins		플러그인 등록

module.exports = {

	웹팩은 기본적으로 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어내는 번들러.
    따라서 웹팩은 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디있는지 알아야 하며, 
    설정 파일에서 이를 Entry 속성으로 명시한다. 웹팩은 Entry 속성에 명시된 파일을 기준으로 
    의존성 트리를 만들어 하나의 번들 파일을 만들어 낸다. Entry 설정의 기본 값은 ./src/index.js
    
    웹팩 npx webpack 명령어 실행시 ./src/index.js파일을 읽어 들여 dist 디렉터리에 main.js 파일로 묶어낸다.
    
	//Entry
    entry: " ./src/index.js",
    
    //Output 설정
    다른 디렉터리와 파일로 변경
    절대경로로 작성하기( 디렉터리 내부라는 보장이 없으니 )
    
    //Loader
    CSS나 이미지, 웹폰트, JSX, VUE등 다양한 종류의 파일을 함께 번들링 할 수 있다.
    
    //Plugin
	https://www.daleseo.com/webpack-config/
    
}

 

https://www.daleseo.com/webpack-config/

 

웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)