1. webpack 시작하기

0. webpack 이란 무엇인가? 

• webpack은 Bundler의 한 종류이다. 번들러를 왜 사용하는지 알아보자. 
• 프론트 개발을 하다보면 리액트, 뷰, 앵귤러 등 다양한 프레임워크를 사용한다. 
• 프레임워크에 따라 HTML, CSS, JS를 프레임워크만의 형식으로 작성하게 된다.
• 화면을 출력하기 위해서는 브라우저가 프레임워크 형식으로 작성된 파일을 컴파일해야 하는데, 이 과정이 오래 걸린다. 
• 번들러는 브라우저가 빠르게 컴파일 할 수 있도록, 프레임워크 형식으로 작성된 파일을 HTML, CSS, JS 파일로 분리하는 역할이다.

 

[ 참고자료 ]

 

velog.io/@eastshine94/Bundler-왜-Bundler을-사용해야하는가

[Bundler] 왜 Bundler을 사용해야하는가?

---

1. 기본 세팅 

a) npm init -y

• package.json 파일이 생성됨 

 

b) npm i -D webpack webpack-cli webpack-dev-server@next

• -D 옵션은 development 개발용을 의미함 
• 설치가 완료되면 node_modules 폴더와 package-lock.json 파일이 생성됨 

 

c) package.json 파일에 개발용 빌드용 명령어 및 모드설정

{
  "name": "webpack-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development", 
    // 개발용 설정( "명령어": "패키지이름" "--옵션 옵션값" 의 구조)
    "build": "webpack --mode production" // 빌드용 설정
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": { 
    "webpack": "^5.36.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^4.0.0-beta.2"
  }
}

 

 

d) 루트 경로에 index.html 파일 생성

reset css 설정하는 습관을 들일 것. 

 

 

e) 루트 경로에 js 폴더 생성하고 main.js 파일 생성

• 아래 간단한 명령어 입력

console.log("Webpack!!!")

 

---

2. entry와 output 설정 

a) 루트 경로에 webpack.config.js 파일 생성

• 웹팩의 구성옵션을 설정하기 위한 파일 

// import
const path = require('path') // node 모듈 


// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정 
  entry: './js/main.js', 

  //결과물(번들)을 반환하는 설정 
  output: {
    // path: path.resolve(__dirname, 'dist'), // 결과물의 반환지점을 설정 
    // filename: 'main.js',
    // 위에 path와 filename 을 주석처리 한 이유는, default로 설정되어 있기 때문
    // path는 dist로 filename은 위에 entry에 설정한 파일이름 그대로 따라감
    // npm run build 입력하면 dist 폴더와 내부파일(결과물)이 생성됨  

    clean: true // 덮어쓰기 기능 속성 
  }
} 

 

b) npm run build

• webpack.config.js 파일을 작성한 후 npm run build 명령어를 터미널에서 실행
• dist라는 폴더가 루트 경로에 생기고 entry에 설정해놓은 main.js 파일이 dist 내부에 생성됨 

 

 

webpack.js.org/configuration/entry-context/#entry

Entry and Context | webpack

 

webpack.js.org/configuration/output/

Output | webpack