- 번들링
- 프론트엔드 개발에서 번들링은 더 쉽고 빠르게 프론트엔드 어플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정
- 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
- 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"
- 번들링의 필요성
- 두개의 js파일에서 같은 변수를 사용하여 충돌이 일어났다
- 딱 한번 불러오는 프레임워크 코드가 8MB라서 인터넷속도가 느린 사용자가 불편을 호소한다.
- 번들 파일 사이즈를 줄이기 위해 파일의 공백을 모두 지웠는데 가독성이 너무 떨어져서 코딩하기가 어렵다. 결국 공백을 되돌려서 코딩한다.
- 배포 코드가 너무 읽기 쉬워 임의로 조작하는 피해가 발생한다.
- 웹팩
-22.07월 프론트엔드 어플리케이션 배포를 위해서 가장 많이 사용하는 번들러
-여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
(모듈 번들러란 HTML,CSS,JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구)
-
웹팩에서의 모듈
-js의 모듈에만 국한하지 않고 HTML,CSS,JPG,PNG같은 이미지 파일들도 전부 포함한 포괄적인 개념이다. -
빌드
개발이 완료된 앱을 배포하기 위해 하나의 파일로 구성하여 준비하는 작업
npm run build를 실행하면 React build작업이 진행되고 index.html파일에 압축되어 배포에 최적화된 상태를 제공해준다. -
웹팩의 필요성
웹팩이 필요한 가장 큰 이유는 웹 어플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다. -
웹팩의 핵심 개념
Entry , Output , Loaders , Plugins , Mode , Browser Compatibilty
ex )
module.exports = {
target: [ "web", "es5" ],
entry: "./src/script.js",
output: {
path: path.resolve(dirname, "docs"),
filename: "app.bundle.js",
clean: true
},
module: {
rules: [
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
}
};
-
Target
웹팩은 다양한 환경과 target을 컴파일한다. target의 기본값은 web이다. 위 예시는 작성된 코드를 es5버전으로 컴파일 하겠다고 지정한 것이다. Browser Compatibilty와 연관된 속성으로 볼 수 있다. -
Entry
프론트엔드 개발자가 작성한 코드의 시작점(번들링을 원하는 파일의 위치)
기본 값은 ./src/index.js이지만 웹팩설정에서 다르게 지정할 수 있다.("/src/script.js") -
Output(출력)
생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할을 한다.(번들링의 결과물)
기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다. 위의 예제에서는 output.filename과 output.path 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주고 있습니다. path 속성을 사용할 때는 path 모듈을 사용해야만 합니다. -
Loader
웹팩은 기본적으로 js와 JSON파일만 이해한다. 그러나 로더를 사용하면 웹팩이 다른 유형의 파일을 처리하거나 그들을 유효한 모듈로 변환해 어플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.
-test: 변환이 필요한 파일들을 식별하기 위한 속성
-use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
-exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정.
(반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)
!! 여기서 test와 use속성을 필수 속성이다. 이런 속성을 넣어 규칙을 정하기 위해서는 module.rules아래에 정의해야한다. rules아래에 정의하면 웹팩은 경고를 하게 된다. -
Plugins (플러그인)
번들을 최적화하거나 에셋을 관리하고 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 된다.
require()를 통해 플러그인을 먼저 요청해야한다.
plugins 배열에 사용하고자 하는 플러그인을 추가해야한다.
대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있다.
다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있기 때문에 new 연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어줘야한다.
위의 예제에서 html-webpack-plugin 은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해줍니다. mini-css-extract-plugin은 CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원합니다. -
Optimization (최적화)
최적화하기 위해 다양한 옵션이 지원이 되는데, 대표적으로 minimize와 minimizer 등을 사용합니다.
-minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
-minimizer : defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있습니다.
위의 예제에서는 mini-css-extract-plugin 에 관련된 번들을 최소화하도록 지시하고 있습니다.
Webpack 순서 ( github 참조 )
- npm init -y. : package.json파일 생성
- npm install -D webpack webpack-cli : 웹팩설치
!! src파일에 html,css,js모아놓고 webpack.config.js를 가장 바깥에 위치시킨다
- Npx web pack : 번들링시작
!! Package.json 에 scripts에 "build": "webpack" 작성 시 npm run build 가능
- npm i -D css-loader style-loader : CSS파일 번들링하기
!! Index.js에 style.css를 require로 연결해놓는다.
- npm i -D html-webpack-plugin : HTML파일 번들링하기
- React Webpack
리액트 개발에 꼭 필요한 라이브러리 :
- react, react-dom
- babel
- jsx를 js로 변경하여 번들링을 해준다.
- css-loader
리액트 개발에 도움이 되는 라이브러리
- react-hot-reloader
-webpack-dev-server처럼 저장할 때마다 변경사항을 개발환경에 적용해주는 라이브러리 , 리액트 상태를 유지시켜준다 - eslint
-js로 개발 시 자주 접하는 에러를 방지하기 위한 린터이다. - prettier
-js로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴 - output 관리 : 번들링할때마다 dist디렉터리를 정리해준다
https://webpack.kr/guides/output-management/#cleaning-up-the-dist-folder - 개발용 서버 만들기 (webpack-dev-server)
https://webpack.kr/guides/development/#using-webpack-dev-server - webpack-bundle-analyzer
웹팩 모듈에 얼마나 많은 모듈이 포함되어 있는지 쉽게 분석할 수 있는 webpack-bundle-analyzer를 적용한다
!! 리액트 웹팩 시 설치해야할 라이브러리
babel , cssloader , plugin
npm install --save-dev babel-loader @babel/preset-env @babel/preset-react
- React-webpack 추가 조건!
(babel.config.js를 파일을 만들어야한다.)
// babel.config.js
module.exports = {
presets: [
["@babel/preset-env"],
["@babel/preset-react", { runtime: "automatic" }],
],
};
ex ) webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /.js/, loader: "babel-loader", exclude: /node_modules/, }, { test: /\.css/,
use: ["style-loader", "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};
(참고)
https://velog.io/@dltmdal0928/Webpack-%EB%B2%88%EB%93%A4%EB%A7%81%EA%B3%BC-%EC%9B%B9%ED%8C%A9-2
