[Webpack] 초보의 build 적용하기

Q. 🤔 이전에 나에게 build란?

나에게 build는 단순히 배포하기 전에 거쳐야 하는 단계.
당연히 거쳐야 하는 단계라는 생각에 뭐하는 단계이지? 왜 쓰는 거지? 와 같은 의문을 가지지 않았다.
이번에 팀 프로젝트를 webpack으로 build하면서 나오는 오류와 이점들을 경험하며 build의 중요성을 알아가고 있다. 프로젝트 build의 경험을 기록하여 webpack에 대해 복습하고 정리해보자.

시작. 팀 프로젝트 빌드하기

• 부트 캠프의 마지막 3주동안 4명이서 진행한 프로젝트.
• vercel에 배포하기 전 webpack으로 프로젝트를 빌드.
• 아래는 현재 프로젝트의 folder structure로 mock sever를 만들다보니 크게 클라이언트와 서버로 나누어서 설계를 하였고 그에 따라 webpack.confing.js 파일은 클라이언트 폴더에 위치시켰다.

 📁 project-HelloWorld
  ├── client/
  │   ├── assets/
  │   ├── dist/
  │   ├── public/
  │   │   └── index.html
  │   ├── src/
  │   └── webpack.config.js
  ├── server/
  │   └── server.js
  └── package.json

* webpack에 설정할 조건

• ES5 이하도 호환가능하도록 설정.
• bundle.js 파일로 output 설정
• index.html에 style.css가 적용되도록 연결.
• index.html와 js파일, image dist 파일에 번들링.
• index.html에 bundle.js 파일 연결.
• sever.js의 mock server 작동.

실행. webpack 설정하기

1. webpack 설치

webpack을 실행하기 위해 npm 으로 cli와 함께 설치.

	npm install -d webpack webpack-cli

2. webpack.config.js 설정

• mode : development 모드로 빌드 테스트를 하고 배포시 productio모드로 빌드.
• entry : client/src/index.js가 진입점이므로 config 파일을 기준으로 경로 설정.
• output : client에 dist 폴더에 bundle.js 파일로 결과물이 나오도록 설정.
• module
  • file-loader : 소스 코드에 사용하는 파일 중 웹팩에 설정한 형식에 맞는 파일들을 모듈 형태로 지원하고 output 파일에 옮겨준다.
  • style-loader: css-loader로 웹팩 의존성 트리에 추가된 string값을 html의<style></style>태그 안에 넣어준다.
  • css-loader : 자바스크립트 파일에서 import된 css파일을 불러오기 위해 사용한다.
• plugins

	module.exports = {
    	mode: 'developement',
      	entry: './src/index.js',
      	output: {
          	path: path.resolve(__dirname, './dist'),
        	filename: 'bundle.js'
        },
      	module: {
        	rules: [{
                test: /\.(svg|png|jpg|gif|mp4)$/,
                loader: 'file-loader',
                options: {
                  name: 'assets/[contenthash].[ext]',
                },
              },
              {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
              }]
        },
      	plugins: []
    }

🚨오류의 반복

여러 플러그인과 loader를 적용하고 한번에 빌드가 성공할 것이라고 생각했다. 하지만 실상은 끝나지 않는 오류의 늪이였다.

처음 설정을 마치고 npm run build를 해보았다. 그 순간 entry의 src/index.js 찾지 못한다는 오류 메세지를 보게 되었다. 무엇이 문제였던 걸까?

이 오류를 찾아보니 webpack.config.js파일의 경로 문제였다. package.json에서 따로 경로를 설정해주지 않을 경우 루트폴더를 기준으로 webpack을 실행하기 때문이다. --config 플래그를 사용하여 config 경로를 설정해 주었더니 webpack 파일을 찾아 build를 할 수 있었다.

	// package.json
    "script": {
    	"build": "webpack --config ./client/webpack.config.js"
    }

🍑오늘의 공부 일기

webpack 커스텀하는 방법도 방대하고 어렵다는 이야기들이 자주 보였는데
직접 해보고 나니 역시 하나하나 배워나가야할 것이 많다고 느꼈다. 그리고 빌드를 하니 용량이 줄어듦과 동시에 html에 자동으로 bundle된 js를 연결해주는 것을 보고 webpack으로 프로젝트를 최적화시켜 퍼포먼스를 높일 수 있을 것이라 기대해본다.