번들링과 웹팩

waymo·2022년 9월 26일

webpack

번들링 과 웹팩

번들링이란?

번들링 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위

'프론트엔드 개발자' 에게 번들은?
-> "사용자 에게 웹애플리케이션을 제공하기 위한 파일 묶음"

Webpack

프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러
여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러.

모듈 번들러
HTML , CSS< Javascript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

Webpack 의 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해
빠른 로딩으로 유저의 이탈을 방지 및 좋은 UX 제공
웹팩을 통해 같은 타입의 파일들을 묶어서 요청 및 응답을 받을시 네트워크 코스트 줄어듬

Webpack의 핵심 개념

webpack.config.js 예시 파일

module.exports = {
  target: ["web", "es5"],
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"), // './dist' 의 절대 경로를 리턴
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 변환이 필요한 파일들을 식별하기 위한 속성 , CSS 파일명으로 끝나는 모든 파일에 적용
        use: [MiniCssExtractPlugin.loader, "css-loader"], 
        // use : 변환을 수행하는데 사용되는 로더를 가리키는 속성
        exclude: /node_modules/, // 바벨로 제외할 파일이나 폴더 지정. 
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

Target

target의 기본값은 web , 적용하지 않으면 기본값으로 적용

Entry

개발자가 작성한 코드의 시작점
여러 Entry point 지정할 수 있음

Output

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법
path 모듈 사용 `const path = require('path')

Loader

JS, JSON 이외의 파일을 Webpack 에게 처리할수 있게 사용
유효한 모듈로 변환하여 애플리케이션에 사용하거나 디펜던시 그래프에 추가

Plugin

번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행가능
new 연산자를 사용해 인스턴스를 만듬
html-webpack-plugin은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML파일을 생성해준다.

Optimization

선택한 항목에 따라 최적화를 실행
대표적 minimize(번들 파일을 최소화), minimizer

실습

폴더 생성 

npm init -y  // npm을 활용할 준비

src/index.js 파일 생성
src/underbar.js 파일 생성

웹팩 설치하기 
npm install -D webpack webpack-cli

웹팩 config 파일 작성
폴더 내부에 webpack.config.js 파일 생성후 작성

번들링 하기
npx webpack

스트립트에 "build": "webpack" 을 추가하여
npm run build로 활용

index파일을 dist디렉토리로 옮기기 (브라우저에서는 node명령 X)

src/style.css파일 작성 (에러발생)

두 로더 설치
npm i -D css-loader style-loader

webpack.config.js파일을 조정
loader 작성

npm run build를 이용해 적용되었는지 확인

HTML도 번들로 포함하는 작업
index.html을 src로 옮기기

html-webpack-plugin을 설치
npm i -D html-webpack-plugin

webpack.config.js에 플러그인을 적용

npm run build를 통해 결과를 확인

html 파일을 번들링되어 새로운 dist/index.html생성