Ch 0. 개발환경 설정 Webpack 1

VS Code와 node js, npm이 기본으로 설치가 되어 있는 상태에서 진행한다. (설치법은 검색엔진 아무곳에서 검색해보면 자세하게 설명된 곳이 많으므로 생략, 혹은 추후에 관련 글을 작성할 예정)

본문에서 세팅하고자 하는 Webpack은 module bundler로 간단히 설명을 하자면 웹 개발을 하기 위해서 필요한 html, css, js 등을 하나의 파일 혹은 여러개의 파일로 병합하거나 또는 압축해주는 역할을 한다고 볼 수 있다.

VS Code를 실행한 후 아무 새폴더를 만든후에 터미널을 연다.
커맨드 라인에 다음과 같이 입력한다.

npm init -y

그럼 다음과 같이 package.json을 초기화할 수 있다.

package.json이 무엇인가?

기본적으로는 package.json은 문서다.

개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서이다.

npm에 패키지를 배포하고 npm registry에 올리기 위해서 반드시 필요한 문서파일이다.

• 자신의 프로젝트가 의존하는 패키지의 리스트
• 자신의 프로젝트의 버전을 명시
• 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다.

즉, npm이라는 오픈소스 패키지 생태계를 사용하기 위한 명세이자, 프로젝트의 의존성 관리를 위한 명세, 또 이 생태계로의 배포를 위한 명세라고 볼 수 있다.

이보다 더 자세한 설명은 추후 다른 본문을 통해서 따로 설명을 올리고자 한다.

다음과 같이 package.json이 생성된 것이 확인되었으면 이번엔 webpack과 관련된 패키지들을 설치해준다.

npm i -D webpack webpack-cli webpack-dev-server

 

설치가 끝나고 난 후에 버전을 webpack의 버전이 본문과 같은지를 확인해보자. 혹시 모를 버전차이로 인한 진행이 불가능할 수도 있으므로 버전이 다른경우 본문과 같은 버전으로 수정해준 후에 터미널에 다음과 같이 입력하여 수정된 버전으로 설치해준다.

npm i

webpack 설치시에 npm i 이후 -D 패키지명을 입력하였는데 여기서 -D 옵션은 devDependencies에 패키지를 설치하겠다는 뜻이다.

-D 옵션을 사용하지 않으면 devDependencies가 아닌 dependencies에 패키지를 설치하게 된다.

dependencies와 devDependencies에 어떠한 차이가 있는지 간략히 설명하자면

• dependencies는 실제 런타임(프로덕션 환경, 실제 서비스를 위한 운영 환경)에서 사용하는 패키지이다.
• devDependencies라 하면 로컬 개발이나 테스트에만 필요한 패키지를 뜻한다.

npm i --production

위와 같이 커맨드라인에 입력하면 node_modules 재설치 시 node_modules 결과물은 dependencies만 설치할 수 있다. 이렇게 설치했을때 런타임시 필요한 패키지만 빠르게 설치할 수 있는 장점이 있다.

이제 src폴더를 생성하고 앞으로 개발할 js파일과 css파일과 저장할 폴더들을 각각 생성한다.

그다음 최상위 경로에 webpack 설정파일(webpack.config.js)을 생성한다.
그 후 다음과 같이 입력한다.

• entry 속성은 js파일의 진입점을 나타낸다.
• webpack은 기본적으로 여러 개의 js 모듈을 하나의 파일로 묶어내는 번들러이다.
• 따라서 webpack은 다른 모듈을 사용하고 있는 최상위 js 파일이 어디에 있는지 알아야 하며, 설정 파일에서 이를 entry 속성으로 명시한다.

webpack은 이 entry 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 bundle 파일을 만들어 내게 된다. entry 설정의 기본값은 ./src/index.js이고, 본문에서 진행할 프로젝트에서는 이를 ./src/js/index.js로 변경하였다.

• output 속성은 빌드를 했을때 bundle 파일 관련 설정을 해준다.
• filename은 bundle 파일 이름을 나타낸다.
• path는 bundle 파일이 생성될 경로를 나타낸다.
• clean은 bundle 파일이 생성될 경로에 이미 다른 파일들이 존재한다면 그것들을 지우고 다시 새로 생성한다.

entry 설정은 항상 프로젝트 디렉터리 내부이기 때문에 상대 경로로 하는 반면에, output 설정은 항상 프로젝트 디렉터리 내부라는 보장이 없으므로 상대 경로를 사용하면 webpack에서 해당 경로를 찾을 수가 없으므로 절대 경로로 지정해야 한다는 점에 주의 해야한다.

절대 경로 지정을 위하여 __dirname을 사용한다. NodeJS에서 현재 프로젝트 디렉터리를 의미한다.

devtool 속성에는 source-map을 입력한다.

• 소스맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 한다.
• 보통 서버에 배포를 할 때 성능 최적화를 위해 html, css, js와 같은 웹 자원들을 압축한다.

mode 속성은 development로 설정한다.

• mode는 production, development, none이 있다.
• production은 배포를 위한 빌드로 코드가 최적화되어 압축된 상태이며 js 파일을 난독화해준다. 파일의 크기가 최소화되어 빌드된다.
• development는 개발을 위한 빌드로 코드가 압축되지 않은 상태이며 난독화가 되지 않은 상태이다. 빠르게 빌드된다.
• none은 기본 최적화 옵션을 해제하여 빌드된다.
• mode 속성의 기본값은 production이다.

webpack에서 기본적으로 제공하는 압축기능 외에 추가적인 압축 플러그인을 사용하기 위해 terser-webpack-plugin을 설치한다.

npm i -D terser-webpack-plugin

그 후 optimization 속성을 설정한 뒤 npx로 webpack을 실행시켜준다.

npx webpack

그러면 다음과 같이 설정한 경로내에 bundle 파일이 생성되는 것을 볼 수 있다.

index.js 파일에 간단한 콘솔로그를 입력한 뒤 다시한번 webpack을 실행해본다.

 

bundle.js에서 index.js에 입력한 console.log("내용");이 들어가 있는것을 확인할 수 있으며 bundle.js.map은 webpack.config.js파일의 devtool 속성에서 설정한 소스맵을 나타낸 파일이다.

만약 webpack의 path 설정에서 절대경로가 아닌 상대경로로 설정할 경우 다음과 같이 제공된 "./dist" 값이 절대경로가 아니라는 문구와 함께 output 속성의 경로는 절대경로를 요구한다는 문구가 뛰어진다.

 

최상위 경로에 index.html을 생성한 뒤 다음과 같은 기본 형태를 입력한 뒤 html와 css 파일들을 설정할 module들을 설치해준다.

npm i -D html-webpack-plugin

npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

 

그 후 새롭게 설치한 플러그인들을 webpack.config.js 파일에 plugin 속성에 추가해준다.
favicon은 무료 favicon을 다운받아서 이름과 파일속성, 경로에 맞게 입력해준다.

webpack 관련 설정만으로도 본문의 내용이 너무 길어져서 이번 내용은 여기서 마치고 다음 글에서 이어서 작성하고자 한다.