웹팩 설정하기 (1)

이번 글에서는 웹팩(Webpack)의 기본 개념과 사용법에 대해서 소개하겠습니다.

웹팩(Webpack)이란?

- 웹팩은 모듈 번들러(module bundler)입니다. 그 말은 우리가 많은 파일들을 가져와서 웹팩에게 주면 웹팩은 그것들을 완전 호환되는 static 파일들로 변환해준다는 것을 의미합니다.

만약에 우리가 모던 자바스크립트를 사용한다면 모던 자바스크립트를 웹팩에 집어넣고, 그것을 받은 웹팩은 그냥 일반적인 CSS와 오래된 노멀한 자바스크립트로 변환해서 웹 브라우저가 알아들을 수 있도록 해줍니다.

다음은 실제 Webpack을 설치하고 활용하는 법에 대해서 알아보겠습니다.

1) npm install webpack webpack-cli 를 통해서 웹팩을 설치합니다.

여기서 webpack은 파일에서 webpack을 사용하기 위함이고,

webpack-cli는 터미널에서 webpack을 쓸 수 있게 해주는 것입니다.

2) 다음은 새로운 파일을 생성해주고 이름은 webpack.config.js라고 정합니다.

3) 다음은 script부분으로 와서 "start"였던 명령어를 "dev:server"로 바꿔줍니다.

그 다음 "dev:assets"라는 새로운 명령어를 추가해줍니다.

이제 실행을 시킬 때, npm start를 쓰지 않고,

npm run dev:server와 npm run dev:assets를 씁니다. 그리고 각각은 다른 콘솔에서 실행합니다.

이 때, npm run dev:assets를 입력하면, webpack이 불러지고,

webpack은 자동적으로 webpack.config.js 파일을 찾습니다.

4) 기본적인 규칙은 webpack은 exported configuration object를 찾는다는 것입니다.

이 config 파일 안에서 명심해야 할 건, server 코드와는 연관시키지 않는다는 점입니다.

이것은 100% client 코드입니다.

즉, 이 말은 우리가 앞에서 코드의 변환을 위해 넣어든 babel-node는 아직 사용할 수 없다는 것입니다.

따라서 webpack.config.js 파일에서는 이전 버전의 자바스크립트를 써야합니다.

5) 먼저 새로운 config를 만들고, 이전 문법으로 export 해줍니다.

6) Webpack은 기본적으로 2가지를 갖고 있습니다.

하나는 entry라고 불리는 것이고, 다른 하나는 output이라고 불리는 것입니다.

entry는 파일들이 어디에서 왔는가? 를 나타내고,

output은 파일들을 어디에 넣을 것인가? 를 나타냅니다.

7) assets라는 폴더를 새로 만듭니다. 이 곳은 우리가 작업할 곳입니다.

그리고 그 안에 두 개의 폴더(js, scss)를 만들고,

각각에 파일(main.js, styles.scss)을 추가합니다.

8) 이제 main.js에는 import "../scss/styles.scss"를 추가하고,

styles.scss에는 body 태그를 추가합니다.

나머지 내용은 2부에서 연결해서 다루겠습니다.

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."