웹팩 설정하기 (2)
이전 글에 이어서 웹팩을 설정하는 방법에 대해서 다루겠습니다.
1) webpack.config.js로 이동해서
두 개의 const(const ENTRY_FILE, const OUTPUT_DIR)를 추가해줍니다.
Node.js에서는 파일과 디렉토리를 absolute로 만들어주는 방법이 있습니다.
즉, 컴퓨터나 서버에서의 전체 경로를 갖게 되는 것인데, 이것을 path로 할 수 있습니다.
path는 Node.js에 기본으로 깔려있는 패키지입니다.
여기에 const path = require("path")를 추가해줍니다.
2) 다음은
const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js") 와
const OUTPUT_DIR = path.join(__dirname, "static")을 추가해줍니다.
여기서 __dirname은 현재 프로젝트 디렉토리의 이름이며,
어디에서든 접근 가능한 Node.js 전역변수입니다.
3) 다음은 config에 entry 와 output을 추가해줍니다.
4) 다음은 npm install cross-env를 통해서 cross-env 패키지를 설치 해줍니다.
5) 다음은 package.json의 scripts로 이동해서,
(1)"dev:assets": webpack -> "dev:assets: cross-env WEBPACK_ENV=development webpack"
으로 수정합니다.
이것은 이전에 .env파일을 수동으로 설정해주는 것입니다.
(2) "build:assets": "WEBPACK_ENV=production webpack"을 추가해줍니다.
이것은 코드를 서버에 올려주기 위해서 필요합니다.
5) 다음은 webpack.config.js 파일로 이동해서
const MODE = process.env.WEBPACK_ENV; 를 추가하고
const config에 mode:MODE를 추가합니다.
이 때, WEBPACK_ENV라는 표현은 package.json에 표현된 것과 동일해야 합니다.
6) 이 부분이 중요합니다.
npm run dev:assets를 통해 실행하면,
다음과 같이 main.js에는 webpack이 빌드되었고,
반면 styles.scss에는 webpack의 빌드가 실패되었다는 결과를 확인할 수 있습니다.
이는 Webpack이 CSS부분을 이해하지 못했기 때문입니다.
7) 이를 해결하기 위해 Webpack에게 rules를 부여합니다.
즉, Webpack이 module을 만났을 때 몇 가지 rule을 따르도록 합니다.
rules는 config라는 object안에 있는 하나의 array입니다.
8) 이 rules안에 해줄 말은 다음과 같습니다.
"Webpack아, 너가 확장자 SCSC인 파일을 만날 때마다, 어떤 loader를 실행해라."
Loader란 기본적으로 Webpack에게 파일을 처리하는 방법을 알려주는 역할을 합니다.
Webpack은 기본적으로 아무것도 모르고, loader를 추가해줘야 비로소 파일을 다루는 법을 알게 됩니다.
이 경우에는 먼저 상태(condition)를 시험(test) 해 봅니다.
즉, "파일을 만나면 그 파일이 SCSS인지 알아봐" 라고 시키는 것입니다.
test: /\(.scss)$/ 를 작성하면 SCSS인 파일들을 모두 찾아줍니다.
9) 이제 다음 목적은,
(1) SCSS 파일을 찾았을 때,
(2) 그 파일을 CSS 파일로 바꾸고,
(3) CSS에 해당하는 텍스트를 전체를 취해서 CSS파일로 저장해야 합니다.
이를 위해 extract-text-webpack-plugin을
npm install extract-text-webpack-plugin@next 을 설치합니다.
10) package.json에서 확인하면, extract-text-webpack-plugin이 잘 설치된 것을 확인할 수 있다.
다음 세번째 글에서 '웹팩 설정하기'를 이어 나가겠습니다.
"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."