1. cra와 번들링
1-1. cra란
Create React App의 줄임말로 손쉽게 최신의 리액트 앱을 설정할 수 있다.
이미 바벨 설정이나 웹팩 설정이 다 되어 있는 프로젝트로 만들어 주기때문이다.
그래서 cra를 사용하면 빌드도 npm run build으로 간단하게 할 수 있다.
1-2. 빌드와 번들
- 번들링: 단순하게 여러 개의 소스 코드를 1개의 파일로 결합하는 과정이다.
- 빌드: 개발자가 작성한 코드들 웹 서버(인터넷)에 실행 가능한 형탱로 제공하는 것이다.
빌드>번들링으로 두개가 완전 다른 개념이 아니라 빌드하는 과정 안에 번들링이 포함되어 있다.
2. cra없이 리액트 번들링하기
2-1. package.json 만들기
npm init -y 로 npm을 활용할 준비를 해준다.
npm 설치가 완료되면 현재 디렉터리 상황에 맞게 package.json 파일이 생성된다.
파일이 생성되며 빌드할 public폴더와 src폴더도 복사해 준다.
2-2. 웹팩 설치하기
import
파일만 복사한 상태에서 node src/index.js으로 파일을 실행하면 실행되지 않는다.
왜냐하면 import 지시자는 ES6문법이므로 따로 변환해주지 않는 이상 Node.js가 읽지 못하 때문이다.
이 상태로는 웹팩을 설치해도 빌드를 하지 못 하기 때문에 웹팩을 설치하고 설정을 해줘서 읽을 수 있게 바꿔줘야한다.
webpack과 webpack-cli
npm install -D webpack webpack-cli 으로 webpack과 webpack-cli을 설치해 준다.
webpack: 모듈 번들링을 실행하는 라이브러리webpack-cli: 웹팩 명령어를 실행하게 해주는 도구
웹팩과 같이 설치해주지 않으면 웹팩의 명령을 사용할 수 없다. 그러므로 같이 설치 해주자.
웹팩은 자바스크립트만
웹팩을 설치 한 후 npx webpack으로 빌드하면 오류가 발생한다. 웹팩이 JSX문법을 읽지 못해서 발생한 오류이다.
왜냐하면 웹팩은 자바스크립트로만 된 모듈만 번들링 해준다. 즉, JSX나 TypeScript 같이 자바스크립트를 확장한 문법은 혼자서 변환을 못한다. 그러므로 바벨을 사용해서 자바스크립트로 변환해주어야 한다.
2-3. 바벨 설치하기
Babel
Babel은 최신 자바스크립트 코드를 이전 버전과 호환되게 변환시켜주는 도구 체인이다.
설치하기
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
-
babel-loader: 웹팩에서 사용되는 로더 중 하나
es6문법으로 작성된 코드를 es5문법으로 변환시켜주는 로더 -
@abel/core: 바벨을 이용해서 코드를 변환하는데 필요한 기능들을 제공하는 필수적으로 깔아야 되는 패키지- 트랜스파일러: 같은 언어지만 문법 변환해주는 도구(컴파일러와 다르다)
-
babel/preset: 개발자들이 언어를 변환할 때 사용하는 플러그인을 모아둔 것 -
@babel/preset-env: 바벨프리셋 중 하나 -
@babel/preset-react: 리액트 관련 플러그인 모아둔 것
2-4. webpack.config.js 파일 작성하기
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 제외해주지 않으면 모듈파일이 빌드때 포함됨
use: {
loader: 'babel-loader',
options: {
presets: [ //preset 여러개이므로 s붙음
['@babel/preset-env'],
['@babel/preset-react', {runtime: 'automatic'}]
//runtime: 'automatic'빌드하는 동시에 변환시켜 적용해줌(필수적으로 넣어주기)
]
}
}
}
]
}
}{runtime: 'automatic'}: 디폴드 값은 classic이며 automatic으로 설정해주면 JSX가 컴파일하는 함수를 자동으로 가져온다.
리액트 설치 및 npm run build 설정하기
npm i react react-dom 리액트 설치해준다.
package.json 파일에서 build추가 해준다.
"scripts": {
"build": "webpack", // "npx webpack"으로 작성도 가능하다
"test": "echo \"Error: no test specified\" && exit 1"
},css 파일 변환하기
npm i -D css-loader style-loader css-loader와 style-loader를 설치해 준다. 그 다음 config 파일에 추가해준다.
module: {
rules: [
{
생략..
}
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
],
}HTML 파일 추가하기
npm i -D html-webpack-plugin으로 html-webpack-plugin설치 해준다. 그 다음 config 파일에 추가해준다. 먼저 require로 불어와서 사용해야한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
..생략..
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})]
}플러그인과 로더의 차이점
- 플러그인: 빌드하는 프로세스에서 추가적으로 기능을 제공해 준다. 즉, 추가적으로 개발자가 설정하는 거라서 웹팩이 인식할 수 있게 require로 넣어주워야한다.
- 로더: 일반적으로 모듈 번들링의 일부로 사용된다. 즉, 따로 불러오지 않아도 웹팩이 자동적으로 인식하고 알아서 로딩하고 적용도 해준다.
- 로더가 결과물을 만드는 과정이라면 플러그인은 만들어진 결과물을 취향에 맞춰 가공하는 과정이다.
2-5. 깃허브에 배포하기
폴더 이름 docs로 변경
webpack.config.js 파일에서 dist로 설정한 폴더 이름을 docs로 바꿔준다. 깃허브는 docs 폴더에 있는 파일을 배포해주기 때문이다.
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'docs'),
filename: 'app.bundle.js',
},gitignore파일 만들기
.gitignore 파일을 만들어 준다.
.gitignore은 원격 리포지토리에 push할 때 필요없는 폴더들을 제외하게 해주는 파일이다.
gitignore에서 필요한 것만 넣어서 검색하면 필요없는 것을 제외해준다. 이걸 .gitignore에 복사해준다. 적용되면 필요없는 파일 표시된다.
만약 적용되지 않는다면
git rm -r --cached .으로 캐시 삭제 후 다시git add .와 커밋을 해준다.
3. 작동 모드 설정
mode 옵션을 사용하면 webpack에 내장된 최적화 기능을 사용할 수 있다. mode 옵션은 development, production, none으로 3가지가 있다.
none, development, production 순으로 최적화 및 난독화가 심해져서 알아보기 어려워진다.
설정되지 않은 경우, webpack은 production가 기본값으로 설정되지만, 모드를 설정해 달라고 경고가 나타난다.
참고) https://webpack.kr/configuration/mode/
4. Output 관리
4-1. clean
output.clean 옵션을 ture로 설정하면 빌드 시 이전에 있던 내용을 삭제하고 빌드해준다.
4-2. filename
filename: '[name].[hash].js' 으로 설정 시 파일 이름이 해시값으로 변경된다. 이 해시값은 빌드한 내용에 따라 변경되므로 빌드 내용이 다르면 다른 해시값을 가진다.
5. Asset 관리
5-1. css 파일 분리해서 빌드하기
npm i -D mini-css-extract-plugin css-minimizer-webpack-plugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'docs'),
filename: '[name].[hash].js',
clean: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env'],
['@babel/preset-react', { runtime: 'automatic' }],
],
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
}),
new MiniCssExtractPlugin() //css 밖으로 빼줌
],
optimization: {
minimizer: [
new CssMinimizerPlugin() //css 최적화
]
},
mode: "production"
};6. 개발용 서버
6-1. webpack-dev-server
npm i -D webpack-dev-server 설치
webpack-dev-server는 간단한 웹 서버와 실시간 로딩 기능을 제공한다. 빌드된 파일을 로컬서버에 띄워 준다.
참고) https://webpack.kr/guides/development/#using-webpack-dev-server
6-2. react-hot-loader
리액트 17버전까지만 지원하므로 버전을 수정해줘야한다.
7. react-scripts
npm i -D react-scripts를 설치하면 npm run start와 같은 리액트 라이브러리 스크립트를 사용할 수 있다.
