1.번들링이란 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미하며 프론트엔드에서는 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"을 의미한다.
번들링을 하지 않는 경우 아래와 같은 문제점이 발생할 수 있다.
-두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
-딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
-번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기기 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
-배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.
2.webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러로 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. Webpack이 필요한 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다.
3.웹팩의 개념에는 Entry, Output, Loaders, Plugins, Mode, Browser Compatibility 등이 있다. 아래의 코드블럭에서 기본적인 속성에 대해서 알 수 있다.
const webpack = require('webpack'); //웹팩 요청
const HtmlWebpackPlugin = require("html-webpack-plugin"); //플러그인 요청
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//플러그인 요청
module.exports = {
target: ["web", "es5"], //특정 환경값을 정해줄 수 있는 target
entry: "./src/script.js", //입구와도 같은 곳으로 이곳을 기준으로 의존 모듈을 탐색
output: { //완료된 번들이 생성될 위치 설정
path: path.resolve(__dirname, "docs"),
filename: "app.bundle.js",
clean: true
},
module: { //Loader부분으로 JSON과 다른 유형의 파일을 처리하거나 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.
rules: [
{
test: /\.css$/, //식별속성으로 여기에서는 css가 대상이다.
use: [MiniCssExtractPlugin.loader, "css-loader"], //사용할 loader 지정
exclude: /node_modules/, //바벨로 컴파일하지 않을 파일이나 폴더를 지정
},
],
},
plugins: [ //시작부분에서 require로 사용 플러그인을 받아와야한다.
new HtmlWebpackPlugin({ //new 연산자를 사용해야 여러 목적으로 재사용이 가능 (HtmlWebpackPlugin은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성)
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(), //(MiniCssExtractPlugin은 CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원)
],
optimization: {
minimizer: [ //defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.
new CssMinimizerPlugin(),
]
}
};
웹팩 만들기 실습 과정
-1.패키지 만들기
npm init -y
-2.웹팩 설치하기
npm install -D webpack webpack-cli
//(웹팩 npm run build 사용하기 아래 코드 package.json scripts에 추가)
"scripts": {
"build": "webpack", // here
"test": "echo \"Error: no test specified\" && exit 1"
},
-3.웹팩 config 파일 작성
@@ 타 js파일도 추가하고 싶은 경우 아래 코드 입력하고 메인에서 require@@@@@@@@@@@@@
module.exports = agoraStatesDiscussions; // <-- 이거 추가를 안하고 헤멨다..
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
filename: 'app.bundle.js',
},
};
-4.로더 추가 및 config 수정
npm i -D css-loader style-loader
//(css를 js파일에 추가해주기(중요)*틀렸음)
require('./style.css'); // <-- 이부분도 entry(입구)파일로 설정된 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: [
{
// 파일명이 .css로 끝나는 모든 파일에 적용
test: /\.css$/,
// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
// 순서 주의!
use: ["style-loader", "css-loader"],
// loader가 node_modules 안의 있는 내용도 처리하기 때문에
// node_modules는 제외해야 합니다
exclude: /node_modules/,
},
],
},
};
-5. html 플러그인 추가 및 config 수정
npm i -D html-webpack-plugin
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})]
};
-6.배포를 원할 경우 output의 dist를 docs로 바꾼 후 docs만 레포지토리에 올린 다음 page 옵션에서 root를 docs로 변경해주면 된다.