webpack과 친해지기 step_1 (설치 및 설정 파일 생성)

1. webpack은 왜 쓰는 걸까.

개발을 하다보면, 하나의 파일 안에 코드가 너무 길어 질 경우 여러 파일로 나눠 import 해서 쓰기도 하고, 그러다 보면 자연스레 컴포넌트나 js파일 css파일 등--이 굉장히 많이 생겨나는 걸 볼 수 있다.

또 그 중 몇몇 파일은 안 쓰이게 되는 경우도 있고, 코드 내에 console.log 처럼 개발할 때만 사용하는 서비스에 불필요한 코드도 생기기 마련인데, 그런 것들을 미처 신경쓰지 못하는 경우가 부지기수이다.

웹팩은 이런 문제들을,

불필요한 코드는 제거하고 많아진 파일들 중 내가 원하는 파일들만 모아서 하나의 js파일로 병합해 줌으로써 해결한다.

그리고 이 합쳐진 파일은 index.html 파일에서 아래와 같은 코드 한 줄로 로딩 되어 화면에 뿌려진다.

<script src="./app.js"></script> 

 

뭐가 되게 많고 어렵지만, 웹팩을 꼭 알아야하는 이유이다.

 

2. webpack 설치

웹팩을 사용하기 위해 설치를 해 보자.

웹팩은 자바스크립트이기 때문에 웹팩을 실행하기 위해선 JS 실행 환경인 Node.js가 필요하다.

노드가 설치 되었다면, 웹팩을 사용할 프로젝트에 대한 package.json을 생성해 준다.

npm init -y

그 다음 웹팩 설치

npm i -D webpack webpack-cli

 

웹팩을 설치가 완료되면 웹팩 설정 파일을 만들어 준다.

프로젝트 파일에 webpack.config.js 를 생성해 준다. 주의할 점은 루트( 프로젝트 폴더 )에 생성해야 한다.

// webpack.config.js 파일

module.exports = {
	// 여기다 웹팩 설정들을 추가해 나갈 것임
}

이렇게 하면 일단 웹팩을 설정할 기초 준비는 완료됐다.

설정은 다음 포스팅에서..

 

※본 포스팅은 제초로 블로그와 캡틴판교의 웹팩 강의를 보고 복습을 위해 작성한 포스팅입니다. 더 정확하고 자세한 지식을 얻고 싶다면 아래 링크를 참고하세요.※

www.zerocho.com/category/Webpack

Webpack

inf.run/u44g

프론트엔드 개발자를 위한 웹팩 - 인프런