리액트에서는 분명 잘 써왔는데
자바스크립트로만 개발을 하려다 보면 import나 export가 잘 안 된다.
script의 type을 module로 할 때만 쓸 수 있다고 한다.
그렇다고 module로 설정한 다음에 써도 잘 안 되는 건 여전하다.
모듈 대신 전역 변수로 선언한 클래스를 써야 했다.
아니 회사에서 그렇게 하고 있었다.
뭔가 방법이 있을 것이지만 급한 게 아니라 넘어갔다.
이를 해결할 수 있을 것 같은 웹팩은 어렵기 때문이다.
개발 중에 require나 import, export를 이용한 모듈을 안 쓴다는 것은 너무나 손해다.
필요할 때만 딱 뽑아서 쓰는 코드의 깔끔함을 누리고 싶었다.
다행히 예상대로 웹팩을 사용하면 type 설정 따위는 잊을 수 있다.
웹팩을 통해 번들링이 끝난 파일은 오래된 문법으로 바뀌고
import나 export 같은 syntax를 변환시켜서인지 일반 script 태그 안에서 잘 돌아가기 때문이다.
그러면 웹팩을 이용해서 자바스크립트 설정을 어떻게 하는지 정리해 보겠다.
일단 깃허브 링크부터 걸어 두겠다.
아주 심플하게 구성했으니 웹팩 입문이라면 파악하기 좋지 않을까 싶다.
github.com/socratone/vanilla-javascript-project-setting/tree/master/src
package.json을 보면 별로, 아니 기준에 따라선 엄청난 devDependencies가 설치돼 있다.
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"core-js": "^3.7.0",
"css-loader": "^5.0.1",
"sass": "^1.29.0",
"sass-loader": "^10.0.5",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^3.3.12"
}
npm i -D @babel/cli
요런식으로 모두 설치하기 바란다.
다음으로 webpack.config.js 파일과 babel.config.json 파일을 작성할 거다.
이에 앞서 간단히 어떻게 돌아가는 건지 설명하겠다.
webpack config 파일에서 entry로 설정한 파일을 시작으로 import된 모든 파일들이 변환 작업을 거치면서 번들링 되고
ouput에서 설정한 하나의 파일로 짜잔하고 나타나게 되는 거다.
이 변환 과정의 한 부분에 babel이 끼어들고 babel.config.json 파일에서 바벨을 이용해 어떻게 변환할 것인지를 설정한다.
바벨에 대한 이야기는 이미 했고 공식 문서에 잘 나와 있으므로 코드만 남겨 놓고 바로 webpack config 파일로 넘어 가겠다.
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "11"
},
"useBuiltIns": "usage",
"corejs": "3.6.4"
}
]
]
}
코드부터 보여준다.
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/, // .js 확장자로 끝나는 파일만 babel-loader를 사용한다.
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.scss$/,
// 먼저 'sass-laoder'가 SASS를 CSS로 바꾼다.
// 다음으로 'css-loader'가 css를 commonJS로 바꾼다.
// 다음으로 'style-loader'가 JS strings를 이용해서 html head에 style nodes를 만들어 넣는다.
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
};
위에서부터 하나씩 설명하겠다.
1. mode
mode는 별 거 없다.
개발 목적의 번들이면 development, 배포 목적의 번들이면 production으로 한다.
목적에 맞게 파일 변환이 이뤄진다고 한다.
이후도 마찬가지지만 자세한 내용은 공식 문서를 참고하자.
2. entry
이 파일에서부터 시작하여 연결된 모든 파일이 번들링되는 거다.
어떤 파일이 entry로 설정한 파일 바로 옆에 붙어 있다해도
한 번도 사용하지 않았다면 포함되지 않는다.
3. output
번들링된 후의 파일 이름과 경로를 설정한다.
보통 경로를 의미하는 'path'에 노드 기본 모듈인 path를 이용해서 절대 경로(__dirname)와 조합해 위치를 지정한다.
__dirname은 node에서 기본으로 제공하는 변수라는 것까지만 알자.
4. module
여기서부터는 뭐가 복잡하다.
그냥 대충 어떻게 돌아가는지만 알고 베껴서 쓰자.
rules 배열을 보겠다.
앞의 객체가 먼저인지 뒤가 먼저인지는 잘 모르겠다. 찾아보기 귀찮
아무튼 앞은 babel을 이용해서 변화를 주겠다는 거고
뒤는 css를 개화시키는 녀석들이다.
앞 객체
test는 조건을 의미하는 속성으로 정규 표현식에 해당하는 파일만 필터링해준다.
정규 표현식 몰라도 간단한 설정은 어디서 긁어와도 되지 않을까.
exclude는 제외시키는다는 속성인데 node_modules에 있는 것들은 건드리지 않겠다는 말이다.
use는 babel-loader를 적용한다는 말이다.
babel.config.json에서 설정한 대로 바벨을 이용해 변환하게 될 거다.
뒤 객체
본인은 더 이상 css를 날 것으로 쓰지 않으므로 test를 보면 scss 확장자를 가진 파일들을 가져온다.
사스(scss)의 nesting과 변수를 지정하는 옵션은 유용한 것 같다.
use의 배열은 뒤에서부터 적용되는 게 맞다.
주석에 써 있는 대로 sass-loader가 scss 파일들을 css로 바꾸고
css-loader가 css를 commonJS 즉 자바스크립트로 바꾸고 ?
마지막으로 style-loader가 이 자바스크립트?를 html head의 style에 적용해서 넣어준다.
이 때문에 웹팩을 이용하면 css가 자바스크립트 번들 파일에 포함되므로
브라우저의 렌더링 순서에 따라 (DOM → CSSOM → JS)
css를 기다리지 않고 렌더링이 더 빠르게 된다는 말을 들은적 있다. 정확한지는 모르
사실 알고 보면 별 거 없다.
다른 스택들보다 심하게 추상화가 되서 알아 먹기 어려울 뿐이지.
여기서 출발해서 입맛에 맞게 설정을 더 해보면 되겠다.
아! 마지막으로 package.json의 scripts 설정을 다뤄야 한다.
"scripts": {
"start": "webpack --watch",
"build": "webpack"
},npm build를 입력하면 bundle.js 파일이 설정한 경로에 생성되고
html 파일에서 불러주면 된다.
npm start의 --watch 옵션이 붙은 걸 볼 수 있다.
이렇게 하면 웹팩 entry에 걸리는 파일이 수정될 때마다 자동으로 webpack이 돌아가 번들링한다.
여기에 VS 코드의 익스텐션인 Live Server를 설치해 요걸로 html 파일을 열어주면 나름 기막힌 개발 환경이 된다.
코드를 저장할 때마다 리프레쉬를 해준다.
Live Server 보다는 웹팩 자체적으로 지원하는 devServer를 사용하자.
'Bundler > Webpack' 카테고리의 다른 글
| 웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module (0) | 2020.11.24 |
|---|---|
| 웹팩을 이용해서 리액트 프로젝트 만들기 (0) | 2020.09.19 |
| 웹팩 시작하기 (0) | 2020.08.29 |
