환경설정을 우습게 보다간 큰 코 다칩니다
우리가 어떤 라이브러리나 프레임워크들을 쓰게 된다던지(ex리액트) 코드 작성 형식을 사용하게 되면(ex프리티어, eslint), 자주 쓰는 파일명이 있습니다.
….”config.js”, …”config.json” 등등
config는 configuration의 약자로 “배치, 설정, 구성” 등의 용어로 사용됩니다.
어떤 식으로 사용할지 설정해주는거죠.
근데 이게 생각보다 쉽지 않습니다.
언어를 사용하는 것보다는 쉽지만, 처음 사용하는 입장에서 다양한 영어들을 보면서 어질어질해 하곤 합니다.
저는 아직도…
제가 config 파일들에 대해 친구들에게 설명해줄때 자주 말해주는게 있습니다.
JS는 뭐다? 객체지향언어다
설정에는 많은 옵션들이 존재합니다.
그런 옵션들도 결국 하나의 메서드, 하나의 클래스명, 하나의 변수명입니다.
물론 더 깊게 파악하고 잘 이해해서 나중에 편하게 사용하고자 한다면 많은 학습이 필요하겠지만, 처음부터 그러면 어지럽습니다. 객체지향이라는 점을 기억하고 사용 방식만 빠르게 파악하고 영어공부를 많이 합시다.
그럼,
웹팩의 설정에 대해 빠르게 정리하겠습니다.
webpack.config.js
보통 편한 번들링 위치 설정 + 동적/정적 파일을 분리시키기 위해 많이 사용하는 폴더(파일)구조가 있습니다.
다음과 같이
public : 정적인 파일들 넣어두는 폴더
src: 코드들 + 자주 쓰는 데이터 같은 것들 넣는 폴더
로 최상위 루트에서 폴더를 파서 관리하는 식으로 많이 사용합니다.
이런 폴더 구조라고 생각하고 웹팩 설정을 해보겠습니다.
필요한 모듈
웹팩을 사용하기 위해서는 몇 가지 모듈을 설치해야합니다.
npm i -D webpack webpack-cli
npm i @babel/preset-env @babel/preset-react
Bash
복사
먼저 웹팩을 사용하기위한 기본 설치 모듈입니다.
•
webpack : 웹팩의 핵심 코어 기능
•
webpack-cli: 터미널에서 사용가능하도록 만들어주는 모듈
최상위 루트에 <webpack.config.js>라는 이름으로 파일을 생성합니다(이름 임의조작 X)
// webpack.config.js
var path = require('path');
module.exports = {
// 번들링 진입지점 설정
entry: "./src/index.js",
// 번들링 후 어떤 식으로 저장할지 설정
output: {
// 최상위 루트에 dist라는 폴더 생성해서 bundle.js라는 파일 안에 번들링 내용 생성
path: path.resolve(__dirname, "/dist"),
filename: "bundle.js"
}
}
JavaScript
복사
이렇게 하면,
번들링 진입지점과 출력형태를 설정할 수 있습니다.
그럼 이제 파일들을 어떤 식으로 처리할지를 설정해줘야합니다.
어떤 식으로 처리할지는 로더를 통해서 정하는데 로더 또한 모듈 설치를 해주셔야 합니다.
// 바벨 핵심 모듈 설치
npm i -D @babel/core @babel/cli
// 로더 설치
npm i -D style-loader css-loader file-loader babel-loader
Bash
복사
슬슬 너무 많은 영어들을 보며 어지러워질 수 있습니다.
천천히 읽으시면 이해할 수 있게끔 최대한 간단 명료하게 설명하겠습니다.
•
style-loader, css-loader : css파일들을 처리하기 위한 로더
•
file-loader : 이미지 파일들을 처리하기 위한 로더
•
babel-loader : 자바스크립트 파일들을 바벨을 통해 문법 버전을 낮춰 모든 브라우저에서 호환 가능한 문법으로 바꿔주는 처리를 하기 위한 로더
각 로더들은 자바스크립트 객체입니다. 항상 객체지향임을 기억하세요.
영어 단어들을 보았을때, 어떤 식으로든 보자마자 그 뜻을 바로 파악 가능할만큼 노력해보세요
잘 보시면, 바벨에서 설치하는 모듈들은 앞에 @ ← 이놈이 붙어있습니다.
그러니 헷갈리시면 안됩니다.
윗 줄 명령어는 바벨을 위한 모듈 설치이고,
아랫줄 명령어는 웹팩을 위한 모듈 설치입니다.
그래도 좀 혼동이 올 수 있습니다. 좀 더 목차처럼 큰 개념으로 설명해보겠습니다.
바벨은,
자바스크립트 파일의 문법을 변환시키는 컴파일러입니다.
번들러가 아닙니다.
웹팩은,
컴파일러가 아닌 많은 파일들을 계층구조를 생성해 하나의 파일로 압축시키는 번들러입니다.
그러니 좀 더 생각해보면,
웹팩이 “css, img들과 더불어 javascript(babel로 문법 변환된)”를 하나의 bundle.js 파일로 압축시키는 겁니다.
이제 어느정도 혼동이 줄어들었을거라 생각합니다.
로더들은 다음과 같이 module안에 rules를 통해 설정합니다.
•
test : 정규표현식을 통해 특정 로더를 사용하기 위한 파일들을 걸러내는 정규표현식
•
exclude: 로더 처리할 필요 없는 것들은 제외
•
loader: 파일의 확장자마다 올바른 로더 설정
•
options: 다양한 옵션들 존재
◦
name: 파일의 이름과 확장자 설정
// webpack.config.js
var path = require('path');
module.exports = {
// 번들링 진입지점 설정
entry: "./src/index.js",
// 번들링 후 어떤 식으로 저장할지 설정
output: {
// 최상위 루트에 dist라는 폴더 생성해서 bundle.js라는 파일 안에 번들링 내용 생성
path: path.resolve(__dirname, "/dist"),
filename: "bundle.js"
}
module: {
// 규칙 설정
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{ test: /\.css$/, use: ["style-loader", "css-loader"]},
{ test: /\.(png|jpe?g|gif|svg|webp|jfif)$/, loader: "file-loader", options: {name: "[name].[ext]"}
]
}
}
JavaScript
복사
여기서 잠깐.
바벨을 실행할 때도 규칙을 설정해줘야하는데요.
좋은 플러그인을 제공합니다.
preset입니다. 이름에서도 유추가능하듯이 미리 세팅된 기능입니다.
프리셋 모듈을 먼저 설치해주도록 하겠습니다.
npm i -D @babel/preset-env @babel/preset-react
Bash
복사
목적에 따라 다양한 프리셋을 사용할 수 있으니 한 번 나중에 찾아보세요
•
@babel/preset-env : ES2015 이상의 문법을 변환할 때 사용
•
@babel/preset-react : react를 변환할 때 사용
바벨 설정은 최상위 루트에 “.babelrc”라는 이름으로 파일을 생성하시면 됩니다.
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
JSON
복사
여기까지가 기본적인 웹팩 설정 파일 내용입니다.
이제 다음 명령어를 사용해서 웹팩을 실행해보세요
// 개발 중일때는 이 명령어를 사용하세요
npx webpack --mode development
// 배포할때는 이 명령어를 사용하세요
npx webpack --mode production
Bash
복사
여기까지 기초적인 웹팩 환경설정 내용들을 다뤄보았습니다.
정말 기초적이고 핵심적인 내용들만 들어있습니다.
플러그인이나, 소스맵 같은 추가 옵션들도 존재합니다.
그러나 필수적이진 않습니다.
그러니 따로 한 번 에러도 만들어내시면서 해보세요.