[리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트)

이번 시리즈 "프로젝트에 웹팩을 적용해보자"는 webpack5를 통해 타입스크립트, 리액트로 만들어진 프로젝트를 빌드하고 개발환경에서 사용할 수 있도록 세팅하는 방법에 대한 시리즈이다.

---

때는 2020년 6월,  내 업무는 기존 레거시코드를 리액트, 타입스크립트로 전환하는 것이었다.

전환과 동시에 개발환경의 셋팅도 기본적인 것만 되어있어서 주업무가 아님에도 설정환경을 건드려 작업하고 또 공부를 해야만 했었다.

그때 Webpack에 대해 기본적인 공부와 수정을 했었기에 개인 프로젝트에 Webpack를 도입하는건 아주 간단한 일이라고 생각해왔다.

그리고 이제 1년이 지나 사이드 프로젝트를 Webpack으로 빌드할 시기가 되었고 기존의 방식으로 설정을 하고 빌드했더니만 아래와 같은 에러를 내뱉으면 동작을 안한다..

module.js:442 throw err; ^ Error: Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3)

원인을 찾아보니 Webpack의 버전 문제라고 하고 기존 프로젝트와 개인 프로젝트의 Webpack 버전을 살펴보니

기존 프로젝트는 webpack4이고 개인 프로젝트에서 설치한 버전은 Webpack5였다.

함께 하는 업무라면 Webpack4로 다시 설정해야겠지만 개인프로젝트니 최신 버전을 공부하고 사용해보기로 하고 공부를 시작했다. 

그리고 시기적절하게 네이버 형님들이 Webpack5에 대해 번역을 해주셨다는 글을 본터라 공식문서를 보고 따라가기로 했다.

webpack

---

공식문서가 정말 깔끔하고 번역도 아름답게 되었기에 아마도 공식 문서를 보고 따라왔다면

 

 

저 상태일 것이다. 그리고 설치한 라이브러리는 아래에 요 정도일 것이다.(정확한 건 아니니 따라가면서 봐보자)

//package.json
"devDependencies": {
    "css-loader": "^5.2.6",
    "csv-loader": "^3.0.3",
    "style-loader": "^3.0.0",
    "ts-loader": "^9.2.3",
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2",
  }

그리고 이제 터미널에 당당히 Webpack 커맨드를 입력한다.

npx webpack

결과는 !!

안타깝게도 공식문서와 나는 사이가 좋지 않은 듯하다. 공식문서를 따라갔는데도 안 되는 안타까운 상황에서 해야 할 일은 구글링뿐 하나씩 고쳐가 보도록 하자

---

고치러 가기 전에 공식문서를 따라가며 느낀 점은 Webpack4에 비해 loader들이 많이 간소화됐다고 느꼈다.

기존에는 file-loader, url-loader, html-loader 등 다양한 로더들이 개별적으로 동작했고 빌드할 때도 시간이 꽤 걸렸다. 그래서 세팅할 때도 필요한 loader를 가져다 쓰는 것도 귀찮았고, 그렇다고 사용할 만한 로더들을 전부 다 가져와서 때려 박기엔 "불필요한 로더는 최대한 사용하지 말라"는 글을 본 기억이 남아있었다.

하지만 Webpack5부터 우리가 쓸만한 로더들이 내부로 들어갔고 type에서는 asset/resource를 통해 간단히 사용할 수 있게 된 점이 좋았다.

webpack.config.js 내 loader module 설정

그리고 스크립트도 변경되었다. 

// 옛날
"scripts": {
  "start": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},

// 현재
"scripts": {
  "start": "webpack serve --open",
  "watch": "webpack --watch",
  "build": "webpack"
},

물론 세부적인 옵션인 --open, --mode development 등은 비슷하다. 

---

다음 포스트에서는 발생한 오류에 대해 하나씩 해결해가보도록 하자.