: FE에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이란 의미로 파일간의 의존관계를 해석해 그룹화해 다양한 문제를 해결함
: 여러개의 파일을 묶어 하나로 압축하는 모듈 번들러로, 대량 및 세분화된 모듈 파일들의 네크워크 환경에서 원활히 사용하기 위해 나타났으며, 여기서 모듈이란 HTML,CSS,JS, 이미지 등의 자원을 의미함
--> 모듈만 번들링 가능 --> Javascript로만 된 모듈만!! 따라서, jsx ts등 js를 확장한 문법 번들링 불가능
--> 바벨을 사용해 변환을 도와줘야함
[빌드 & 번들링]
--> 빌드와 번들링 과정을 통해 앱 실행을 위한 코드를 상대적으로 가볍게 만들고 로딩 시간을 단축시킴 --> 사용자 만족도 증가
npm init -y
- package.json 생성
npm install -D webpack webpack-cli
- webpack: webpack 라이브러리
- webpack-cli webpack 사용할 있게 해주는 라이브러리
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
- babel-loader: 웹팩에서 사용되는 로더 중 하나로, ES6문법으로 작성된 코드를 ES5문법으로 변환시켜주는 역할
- @babel/core: 바벨을 이용해서 코드를 변환하는데 필요한 기능을 제공함 (필수), Transfiler라고도 하며, 같은 언어지만 문법적으로만 변환시켜주는 역할 (!== 컴파일러 --> 다른언로로 만드는것이 아니기 때문)
- @babel preset-[이름]: 바벨의 프리셋 중 하나로, 이름에 해당하는 변환을 해주기 위함과 같이 특정한 변환 규칙을 모아둔 것 (자주는 쓰는 설정과 사용하는 플러그인 묶음) ex) env -- 순수함수, react -- es6->es5
npm i -D css-loader style-loader
- css-loader : css파일을 불러오기 위한 로더
- style-loader : 불러온 css 파일을 변환해주는 역할을 하는 로더
npm install -D html-webpack-plugin
- plugin: 빌드하는 프로세스에 추가적으로 기능을 제공해 줌 (new HtmlWebpackPlugin - html 파일에 js 번들을 묶어줌)
// 플러그인을 따로 require해주는 이유 녹화본 보고 적자
//HtmlWebpackPlugin --> html 변환해서 가져오기
npx webpack
번들링 명령어
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {script:'./script.js'},
output: {
path: path.resolve(__dirname, "docs"),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, ".", "index.html")
})]
};
- 원격 레포지에 번들링한 프로젝트 push
- Settings -> Pages -> 브랜츠 main, docs설정 이후 save
- https://[깃허브이름 소문자로].github.io/[원격저장소이름] 으로 배포됨