NPM 웹팩(WebPack) 번들러 시작하기 1

NPM으로 웹팩(WebPack) 번들러 기본 세팅하기

웹팩은 워낙 범위가 크고 다양해 세세한 설정이 필요하지만, 프로젝트 규모가 커질 때 그 진가를 발휘한다

 

프로젝트 시작하기

1. npm init -y

• 폴더 생성 후 cli로 들어가서 npm init -y 입력
• package.json 파일이 생긴다

 

2. npm i -D webpack webpack-cli webpack-dev-server@next

• 모듈 번들러의 대명사답게 웹팩은 기본적으로(?) 3개부터 설치하고 시작한다
• webpack, webpack-cli, webpack-dev-server@next
• dev-server설치에서 @next는 cli와 버전을 일치시키기 위한 추가 키워드

 

3. package.json에 scripts 추가

• 과정1에서 생겼던 package.json을 보면 웹팩이 설치 후 관련 내용이 devDependencies에서 보인다
• "scripts"에서 다음 내용을 입력해 추가 설정을 마치자

...생략
"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},
...생략

• 말그대로 dev명령어로 실행하는 것은 webpack-dev-server를 실행할 것이고 개발용 모드라는 뜻
• build 명령어는 dev-server가 아닌 webpack을 실행하고 실제 배포용 모드로 설정한다는 것

 

webpack -> 웹팩이라는 번들러가 동작하기 위한 핵심 패키지
webpack-cli -> 터미널(cli) 명령을 지원해주는 패키지
webpack-dev-server -> 개발 전용 서버를 지원해주는 웹팩 패키지

 

4. index.html파일 생성

• 기본으로 설정할 index.html을 생성 후 html양식을 적용한다

 

5. webpack.config.js파일 생성

• 이후 이 파일의 내용을 수동으로 한땀 한땀 작성해야 한다(?)

 

6. js폴더 / main.js파일 생성

• js폴더 생성 후 안에 main.js파일을 추가생성

폴더 구성 목록

 

7. webpack.config.js파일 설정하기

• webpack은 node.js환경에서 돌아가는 것이기 때문에 기본적으로 require(), module.exports키워드를 사용해야한다
• entry와 output은 추가로 더 명시할 수 있다

//import시 require()
//node.js의 전역에서 path라는 모듈 불러오기
const path = require('path');

//export시 module.deports = {}
module.exports = {
  // 파일을 읽기 시작하는 첫 진입점. js파일
  entry: './js/main.js',
  // 컴파일된 결과물 관련 설정
  output: {

    //새로 빌드 시 이전에 빌드했던 파일들을 제거하고 싶다면 true
    // 5.20.0 버전부터 사용 가능!
    clean: true,

    //결과물 경로 설정.
    //절대경로를 설정해야하니 import로 불러온 path를 사용해 dist 폴더를 생성한다고 명시
    //__dirname -> 현재 이 파일이 있는 경로를 지칭하는 것
    // * 기본값이므로 작성 안해도 적용된다* 
    path: path.resolve(__dirname, 'dist'),

    //결과물 이름 설정. entry에서 읽었던 파일과 동일명으로 작성 가능
    // * 기본값이므로 작성 안해도 적용된다* 
    filename: 'main.js',
  },
};

 

8. npm run build

• 아까 package.json파일에서 설정한 것에 맞춰 npm run build로 컴파일 명령 실행
• 빌드에 성공하면 dist라는 폴더와 안에 main.js파일이 생긴다.

이후 플러그인과 로더 등 각종 애들을 더 지정해줘야 한다...!!