[TIL] Day62 #Webpack

2022.07.25(Mon)

[TIL] Day62
[SEB FE] Day63

🎁 번들링

: 사용자에게 웹앱을 제공하기 위한 파일 묶음 👉 모듈 간 의존성 관계 파악 후 그룹화하는 작업

🗂 Webpack

: 여러 파일 → 하나 파일로 합쳐주는 모듈 번들러로, 현재 Front-end 앱 배포에 가장 많이 사용!

✨ Webpack 필요한 Best 이유는? 웹 애플리케이션의 빠른 로딩 속도 & 높은 성능을 위해!

➰ 모듈 번들러
: 각각의 모듈(HTML, CSS, JS 등의 자원)을 조합해서 하나의 묶음으로 번들링(빌드)하는 도구

➰ Build
: 개발 완료 앱 배포를 위해 하나의 폴더로 구성하여 준비하는 작업

📎 Webpack 속성

1. Target: Browser Compatibility와 연관된 속성. [default-web]

2. Entry(= Entry point): 작성 코드 시작점!

   • Webpack이 내부 dependency graph 생성을 위해 사용해야 하는 모듈
     [default-./src/index.js]

3. Output: 생성된 번들을 내보낼 위치 & 파일 이름 지정 방법을 webpack에 알려주는 역할

   • 기본 출력 파일 → ./dist/main.js
   • 생성된 기타 파일 → ./dist
     ✋ path 속성 사용시엔 path 모듈 사용해야 함
     

4. Loader: webpack은 JS, JSON 파일만 이해! → Loader 사용시 다른 유형 파일 처리 가능

   • test: 변환이 필요한 파일들 식별을 위한 속성
   • use: 변환 수행시 사용되는 Loader를 가리키는 속성
   • exclude: Babel로 컴파일하지 않을 파일 / 폴더 지정
     ↔ include: 반드시 컴파일해야 할 파일 / 폴더 지정
     

5. Plugins: 번들 최적화 / asset 관리 / 환경변수 주입 등 광범위한 작업 수행 가능
   a. require()를 통해 먼저 플러그인 요청하기
   b. plugins 배열에 사용하고자 하는 플러그인 추가하기

   • new 연산자로 호출 → Plugin Instance 생성해줘야 함!

   • html-webpack-plugin: 생성된 모든 번들 자동 삽입 → 앱용 HTML 파일 생성

   • mini-css-extract-plugin: CSS 별도 파일 추출 → CSS 포함하는 JS 파일 당 CSS 파일 작성해주게끔 지원

6. Optimization: 선택한 항목에 따라 최적화 실행

   • minimize: TerserPlugin / optimization.minimize에 명시된 plugins
     • bundle 파일을 최소화(압축)시키는 작업 여부 결정
   • minimizer: TerserPlugin 인스턴스 제공해서 재정의 가능

📎 Webpack 사용하기

agora-states-reference에 적용해보기 🙌

1. Directory 생성

2. npm init -y

3. script.js 파일 생성
   a. data.js 즉, 데이터 파일 코드 마지막에 module.exports = agoraStatesDiscussions; 코드 추가
   b. script.js에서 const agoraStatesDiscussions = require("./data.js"); 코드 추가해서 데이터 불러오기!

4. Webpack 설치

   $ npm install -D webpack webpack-cli

5. Webpack config 파일 작성

   // webpack.config.js
   const path = require('path');
   
   module.exports = {
     entry: './script.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'app.bundle.js',
     },
   }

6. 번들링하기

   $ npm webpack

7. npm run build 설정

   // package.json
   
   "scripts": {
       "build": "webpack", // 요기 코드 추가!
       "test": "echo \"Error: no test specified\" && exit 1"
     },

8. index.html 파일 코드 수정

   <!-- index.html -->
   
   <script src="data.js"></script>
   <script src="script.js"></script>
   
   <!-- 기존의 위 코드는 지우고 아래 코드를 추가하여 번들 파일과 연결해주기! -->
   
   <script src="app.bundle.js"></script>

9. style-loader, css-loader 설치 → css style 적용

   $ npm i -D css-loader style-loader

   // webpack.config.js rules 추가!
   
   module: {
       rules: [
         {
           // 파일명이 .css로 끝나는 모든 파일에 적용
           test: /\.css$/, // .css로 파일명이 끝나는 모든 파일에 적용
           use: ["style-loader", "css-loader"], // 배열 내에서 <- 순으로 적용
           exclude: /node_modules/, // loader가 node_modules 내용도 처리하므로 얜 제외해야 함
         },
       ],
     },

   // script.js
   
   // css 파일 연결해주기
   require("./style.css");
   
   // 이후 index.html의 <link rel="stylesheet" href="../style.css"> 코드 없애도 style 잘 적용됨!

10. html-webpack-plugin 설치

    $ npm i -D html-webpack-plugin

    // 최종 webpack.config.js
    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      entry: "./script.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "app.bundle.js",
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
            exclude: /node_modules/,
          },
        ],
      },
    	// html-webpack-plugin 적용 부분
      plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "index.html"),
        }),
      ],
    };

11. 마지막으로 npm run build 다시 해주면 끝~!

12. Github 레포지토리 생성 후 dist 폴더 이름을 docs로 변경 후,
    app.bundle.js & index.html 두 파일만 업로드 후 github page에 배포하면 데이터까지 잘 나옴!!

✨ 배포 성공 🙌  https://beanxx.github.io/fe-sprint-webpack/