[Webpack] 개념 및 환경 설정

🤔 Build? Webpack? 그게 뭐지???

HTML / CSS / Javascript로 프로젝트를 배포를 하려니
그 전에 build를 해야한다고 한다.
현재 코드 그대로 배포를 해도 웹 페이지가 잘 동작하는데
왜 build를 하는 걸까..... 또 그 build를 위해 webpack을 알아야 한다는데.....
예시를 잠깐만 훑어봐도 알아야할 게 많아 보이는 webpack.
제대로 쓰기 위해 공부해보자.

Build

Build는 내가 작성한 코드를 컴퓨터에서 실행할 수 있도록 변환시키는 과정이나 결과물을 말한다. 그리고 webpack과 같은 빌드 도구가 이를 자동화하여 실행시켜주는 프로그램이다.

webpack

• 종속성이 있는 여러 개의 파일을 정적인 소스들로 생산하는 모듈 번들러.
• loader를 사용하여 html, css, scss, image 등 Frontend에서 다루고 있는 파일들을 하나의 모듈로 취급하여 처리.
• 번들될 파일을 압축 및 난독화 가능.
• 크게 entry, output, loader, plugin으로 나눔.

webpack.config.js 설정

• mode

  • 번들링 모드로 설정에 따라 다르게 적용

    mode	설명
    production	기본 값(배포 모드). 코드를 압축하여 난독화 상태로 만듦
    development	개발 모드. 난독화되지 않은 상태
    none	설정되지 않은 상태로 개발모드와 비슷함

• entry

  • 진입점으로 모듈이 어디서부터 시작되는 지를 웹팩에게 알려준다.
  • 여러 진입점 설정 가능.

• output

  • 웹팩으로 번들링하거나 로드하는 항목들의 위치과 출력방법 설정.
  • 절대 경로로 설정.

  const path = require('path');
  
  module.exports = {
    //...
    output: {
      path: path.resolve(__dirname, 'dist'), // 절대 경로
      filename: 'bundle.js'
    },
  };

• module

  • 웹팩이 기본으로 지원하는 모듈 이외에 프로젝트에서 사용하는 다른 모듈들을 처리하는 방법을 설정.
  • rules에서 use를 사용하여 loader를 정의할 수 있음.
  • use 배열에 여러 개의 loader를 정의하면 오른쪽에서 왼쪽으로, 또는 마지막 설정에서 첫번째 설정을 적용.

  module.exports = {
    // ...
      module: {
            rules: [
              {
                use: ['css-loader','style-loader'],
              },
           ],
      },
   };

• plugins

  • loader가 할 수 없는 작업을 설정.
  • 새로운 인스턴스를 전달. 매개변수 및 옵션 설정 가능.
  • 아래의 HtmlWebpackPlugin 플러그인은 script 태그에 번들된 js를 연결하여 html 생성.

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // ...
    plugins: [
      new HtmlWebpackPlugin({ template: './src/index.html' }),
    ],
  };

🍑 오늘의 공부일기

webpack에 대해 정리하면서 기본 틀에 대한 개념을 알게되었다. 또한 다양한 옵션들이 있다는 것을 알았지만 확실히 개념만 가지고는 아직 어떻게 동작하는지는 잘 모르겠다. 일단 많이 쓰이는 로더와 플러그인을 가지고 실제로 해보면서 조금씩 배워나가는 것이 더 많은 공부가 될 것 같다. 다음에는 실제 프로젝트를 webpack으로 build해보자.

참고 자료
https://webpack.kr/configuration/output/
https://yamoo9.gitbook.io/webpack/
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80