번들 :
사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
웹팩 :
프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하고 있는 번들러
모듈 번들러
세분화된 모듈 파일들을 호출해 브라우저에 띄워야 하는데, 각 변수들의 스코프 문제, 각 자원을 호출할 때 생겨나는 네트워크 쪽 코스트에 신경을 써주어야 했다.
이러한 복잡성에 대응하기 위해 하나의 시작점으로부터 의존성을 가지는 모듈을 모두 추적해 하나의 결과물을 만들어내는 것이모듈 번들러이다.
이때, 웹팩에서는 HTML, CSS, .jpg, .png등 모든 파일을 전부 모듈으로 포함한다. 웹팩의 로더(loader)를 통해 다양한 파일도 번들링이 가능하다.빌드
개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업. 리액트에서는 npm run build를 실행시 빌드 작업이 진행되어 index.html에 압축되어 빌드된다.
번들링
모듈 간의 의존성 관계를 파악해 그룹화하는 작업
웹팩의 핵심 컨셉
Entry, Output, Loaders, Plugins, Mode, Browser Compatibility
config파일 파헤치기
module.exports = {
//target : 디폴트값은 web. esX를 넣으면 ECMAScript 버전으로 컴파일한다.
//예시에서는 브라우저와 동일한 환경에서 사용하기 위해 컴파일하는것이고, es5버전으로 컴파일한다.
target: ["web", "es5"],
//entry : 개발자가 작성한 코드의 시작점.
//이 엔트리포인트를 기준으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.
//디폴트값은 ./src/index.js
entry: "./src/script.js",
//output : 생성된 번들을 내보낼 위치와 그 파일의 이름을 지정하는 방법을 알려주는 역할.
//기본 출력파일은 ./dist/main.js
//예시에서는 output.filename과 output.path 속성으로 이름과 위치 지정
output: {
path: path.resolve(__dirname, "docs"), //절대경로로 설정해야함
filename: "app.bundle.js",
clean: true
},
//* loader : 웹팩이 자바스크립트나 제이슨 파일 외에도 이해할 수 있도록 함
//module.rules.test, module.rules.use는 필수
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /node_modules/,
},
],
},
//plugins : 번들을 최적화하거나 에셋을 관리하고 환경변수 주입 등 광범위한 작업을 수행할 수 있다.
//require()를 통해 플러그인을 먼저 요청한다.
//plugins 배열에 플러그인 추가. 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있기때문에 new연산자로 호츌해 플러그인의 인스턴스를 만들어줘야한다.
plugins: [
new HtmlWebpackPlugin({ //생성된 모든 번들을 자동으로 삽입해 애플리케이션용 html 파일 생성
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(), //css를 별도의 파일로 추출해 css를 포함하는 js파일당 css파일을 작성하도록 지원
],
//optimization 선택한 항목에 따라 최적화 실행
//minimizer, minimize 등 사용
//예제에서는 mini-css-extract-plugin 에 관련된 번들을 최소화하도록 함
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
}
};Loader : module.rules 아래에 정의해야 함
test: 변환이 필요한 파일 식별(필)
use: 변환을 수행하는 데 사용되는 로더(필)
exclude: 바벨로 컴파일하지 않을 파일이나 폴더 지정
include: 반드시 컴파일해야 할 파일이나 폴더 지정
optimization
minimize : TerserPlugin 또는 optimization.minimize에 명시된 플러그인으로 번들 파일 최소화시키는 작업 여부 결정
minimizer : default minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의
웹팩 튜토리얼
튜토리얼1
1. npm init
npm init -y2. index.js파일 생성
3. 웹팩 설치
npm install -D webpack webpack-cli4. config파일 작성
webpack.config.js파일을 만들어 entry, output 등의 정보를 작성한다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴함
filename: 'app.bundle.js',
},
};5. 번들링하기
npx webpack6. npm run build 설정
package.json 파일의 scripts 부분에 추가한다.
"build": "webpack"why webpack
튜토리얼2 : css
1. src/index.html 파일 작성
에러가 뜨는데 당황하지 않아도 된다!
require 문법은 Node.js문법이라 브라우저에서 지원하지 않는다.
브라우저에서 작동할 수 있도록 번들링을 하면 된다!
- index.html파일을 dist 디렉터리로 옮긴다.
- 스크립트를 연결한다.
<script src="app.bundle.js"></script> - index.js 브라우저에서 볼 수 있도록 코드를 수정한다.
쿼리셀렉터로 #app 가져오기 -> app에 요소 어펜드 - 다시 npm run build하여 app.bundle.js에 변화를 적용하기 위해 번들링
2. src/style.css 작성
- index.js에 불러온다.
require('./style.css');node.js는 css를 읽을 수 없어 아직 에러가 나온다.
웹팩도 마찬가지. css를 읽기위해 로더가 필요하다.
- 필요한 로더를 설치한다.
npm i -D css-loader style-loader- webpack.config.js에 코드를 추가한다.
module: {
rules: [
{
// 파일명이 .css로 끝나는 모든 파일에 적용한다.
test: /\.css$/,
// 적용될때 배열의 뒤에서 앞으로 적용된다. 순서 주의할것
// 먼저 css-loader가 적용되고, styled-loader가 적용된다.
use: ["style-loader", "css-loader"],
// node_modules은 로더가 처리하지 않도록 꼭 제외해주어야 한다.
exclude: /node_modules/,
},
],
},- npm run build
app.bundle.js 폴더를 보면, style요소를 자동생성하고 css를 넣고있음을 알 수 있다.
html 파일에 link 태그를 넣을 필요 없이 스타일요소가 담겨있는 것을 확인할 수 있다.
튜토리얼3: html
- dist/index.html을 src로 옮긴다.(src/index.html)
- html-webpack-plugin 설치
번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함한다.
npm i -D html-webpack-plugin- webpack.config.js 파일 수정. module 다음에 작성하면 됨.
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})]- npm run bundle
src/index.html 파일을 번들링하여 dist/index.html 파일을 새로 생성한다.
플러그인은 사용량을 기준으로 많이 사용하는 플러그인을 먼저 찾아보는 방식으로 학습한다. 명칭을 보고 역할을 파악하기 힘들기 때문.
실습을 하는데 자꾸 마지막 단계에서 에러가 나왔다.
const HtmlWebpackPlugin = require('html-webpack-plugin')이렇게 변수에 담아서 플러그인 써줘야함...!!!
리액트 번들링
리액트 개발에 꼭 필요한 라이브러리
react, react-dom
babel
css-loader
리액트 개발에 도움이 되는 라이브러리
react-hot-reloader
저장할때마다 변경사항 적용
eslint
자바스크립트로 개발시 자주 접하는 에러를 방지.
prettier
자바스크립트로 개발시 통일성있게 코드 형식을 맞출 수 있게 도와준다.
