22/12/01_TIL Webpack

Webpack 사용계기

처음 개발을 배우고는 vscode의 live server를 이용했고 하나의 html에 하나의 js파일 뿐이라 웹팩의 필요성을 느끼지 못했다. 2차과제 수행하면서 js파일을 모듈화하기 시작했는데 몇 개의 모듈화된 js 파일이 전부라<script type="module">를 사용하고 별도의 빌드 툴을 사용하지 않았다. 하지만 2차과제 리뷰어분께 번들러 사용을 학습해보길 추천받아 3차과제에는 웹팩을 이용해보기로 마음먹고 도전했다..!가 config작성하면서 멘붕 🤯 그러자 박영웅강사님이 마침 webpack수업을 진행하셔서 많은 궁금증을 한번에 해결할 수 있었다. 오늘 그 내용을 정리해보려고 한다.

Webpack 이란❓

웹팩은 이런 모듈화된 js파일들을 하나의 파일로 만들어 주는 모듈 번들러이다. 그 이외에도 로더를 사용하면 정적파일, css파일도 하나의 모듈로 생각하고 번들해주는데 처음에는 이런사실을 모르고 왜 js파일에 import ./main.css를 보고... 에엥????/
상단 이미지가 웹팩의 정의나 필요성을 모두 담고있는거 같다.
참고: https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80

Webpack 설치하고 시작하기

npm init -y
npm install webpack webpack-cli webpack-dev-server --save-dev

npm 초기화 후 webpack을 설치하고
package.json에서 잘 설치됐는지 확인 후
"scripts" 에 사용할 명령어 설정한다.

  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.2",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }

webpack.config.js파일 이해

webpack 설치와 명령어 추가가 끝난 후
webpack.config.js파일을 생성하고 아래의 양식을 따라 설정한다.

// import path from 'path' ->ESM 모듈시스템에서의 import 방식

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// config.js파일은 nodejs환경에서 동작하기때문에 require문법을 사용!

module.exports = {
  entry: './main.js', // 진입점
  output: { // 결과 출력
    // path: path.resolve(__dirname, 'dist'), // 기본값, 작성안해도 dist폴더
    // filename: 'main.js', // 진입점 파일명이 기본값으로 들어감
    clean: true, // 빌드할 때 이전폴더 알아서 지우고 다시 빌드
  }, 
  module: {
    // main.js 에 연결된 특정확장자를 만나면 로더를 이용해서 변환해라
    // Loader
    rules: [
      {
        test: /\.s?css$/, // 변환이 필요한 파일
        use: ['style-loader', 'css-loader', 'sass-loader'],
        // 변환에 사용될 로더, 순서는 뒤에서 부터 적용
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 제외항목
        use: 'babel-loader',
        // babel은 js를 구버전으로 변환해 최신버전을 이해하지 못하는 브라우저에서도 작동할 수 있게 해줌
      },
    ],
  },
  plugins: [
    // 플러그인을 통해 html이나 정적파일들을 dist폴더에 삽입
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: 'static' }],
    }),
  ],
  devServer: {
    port: 1216, // localhost 포트번호 설정 가능
  },
};

데브서버 실행

$ npm run dev

설정후 명령어를 입력하면 웹팩 데브서버가 실행된다.

느낀점

우선 webpack.config.js파일은 nodejs환경에서 동작하기 때문에 commonJS 모듈 시스템의 require문법을 사용해야 한다. 이러한 사실을 모르는 당시에 백준문제 입력받을 때는 이게 뭐야??싶고 웹팩 사용법을 들어도 이걸 왜 쓰는거지? 싶었는데 직접 사용해보고 시행착오를 겪은 후 수업을 들으니 많은 궁금증이 해결되었다.