Section4 - Unit 3 [React] 번들링과 웹팩

정호재·2023년 3월 20일
0

코드스테이츠

목록 보기
28/37

번들링

: FE에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이란 의미로 파일간의 의존관계를 해석해 그룹화해 다양한 문제를 해결함

  • 파일 코드를 하나로 묶고 압축하는 과정에서 용량이 크게 줄어들어 실행속도 및 메모리 자원 활용에 이점을 가짐
  • 번들링 및 압축된 상태에서는 사용자가 파일을 임의로 조작하는 것을 막아줌
  • 서로 다른 파일에서 중복된 변수 사용으로 인한 변수 충돌을 번들링 도구(Webpack)를 사용해 해결가능

Webpack

: 여러개의 파일을 묶어 하나로 압축하는 모듈 번들러로, 대량 및 세분화된 모듈 파일들의 네크워크 환경에서 원활히 사용하기 위해 나타났으며, 여기서 모듈이란 HTML,CSS,JS, 이미지 등의 자원을 의미함
--> 모듈만 번들링 가능 --> Javascript로만 된 모듈만!! 따라서, jsx ts등 js를 확장한 문법 번들링 불가능
--> 바벨을 사용해 변환을 도와줘야함
[빌드 & 번들링]

  • 빌드
    : 배포 준비가 완료된 앱을 배포하기 위해 하나로 폴더로 구성해 준비하는 작업, react의 경우 index.html 파일에 압축-최적화 실시

--> 빌드와 번들링 과정을 통해 앱 실행을 위한 코드를 상대적으로 가볍게 만들고 로딩 시간을 단축시킴 --> 사용자 만족도 증가

Webpack의 핵심 개념 (속성)

  • Target: 다양한 환경 및 target 컴파일, defalt -> web
  • Entry: 코드의 시작점으로 하나의 요소에 코드를 적용함, defalt -> ./src/index.js
  • Output: 해당 번들을 생성할 위치 및 파일 이름
  • Loader: webpack은 기본적으로 json파일만들 이해하며 다른 유형을 파일 처리 및 유효한 형태로 변환 혹은 의존그래프에 추가(test, use 속성은 필수)
  • Plugins: 번들 최적화 및 에셋 관리등에 사용
  • Optimization: 최적화를 위한 옵션이 지원되며, 대표적으로 파일 압축을 위한 minimize와 TersePlugin 인스턴스을 바탕으로해 재정의 작업을 위한 minimizer가 있음

실습에서 사용할 것들

  • 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/[원격저장소이름] 으로 배포됨
profile
공부 일기장

0개의 댓글