Webpack

Webpack

• 프론트엔드 프로젝트에서 가장 오래전부터 사용된 번들러이자 현재까지도 가장 안정적인 번들러

• 다른 신규 번들러들도 웹팩을 기준으로 함, 거의 스탠다드

• 개발 환경에서의 성능 문제로 인해 많은 다른 번들러의 도전을 받고있음

  • 실제 프로덕션의 최종 결과물은 느리지 않고 안정적임

• 웹팩팀이 Vercel에 합류하면서 Rust 기반으로 turbopack이라는 웹팩 대체품을 만들고 있음

• Module Federation 기능을 제공하고 있어 MFA를 도입한 회사들은 Webpack을 사용함

Why webpack

브라우저에서 자바스크립트를 실행할 때, 파일을 추가하기 위해 <script> 태그를 사용합니다. 프로젝트가 커지면 스크립트를 여러 개의 파일로 분리하고, <script> 태그를 적절한 순서로 추가합니다. 그러나 파일이 많아지면 네트워크 병목이 발생할 수 있습니다. 이 문제를 해결하기 위해 작은 파일을 합쳐서 큰 하나의 자바스크립트 파일을 만들어 사용하는 방법이 있습니다. 이렇게 하면 유효 범위, 크기, 가독성, 유지보수 등에 문제가 발생할 수 있습니다.

이런 문제를 해결하기 위해 IIFE (Immediately Invoked Function Expression), 즉시 실행 함수를 사용하여 함수 스코프로 범위를 제한할 수 있습니다. 이를 통해 파일을 합칠 때 유효 범위에 대한 걱정 없이 사용할 수 있습니다. 그러나 이 방식은 가독성이 떨어지고 최적화하기 어려울 수 있습니다.

Node.js에서는 CommonJS를 채택하여 모듈 방식을 사용할 수 있게 되었습니다. 그러나 브라우저에서는 이를 사용할 수 없었습니다. 또한 CommonJS에는 라이브 바인딩 지원이 없으며, 순환 참조, 동기적인 모듈 해석, 느린 로딩 등의 문제가 있습니다. 이를 해결하기 위해 Browserify, RequireJS, SystemJS 등의 번들러와 툴이 등장했습니다.

ES Module이 ECMAScript 표준에서 공식 기능이 되었지만, 초기에는 브라우저 지원이 불완전하고 번들링이 여전히 더 빠른 상황이었습니다. 자바스크립트 앱을 번들로 묶을 수 있는 (ESM, CommonJS 모두 사용 가능한) 도구가 필요했습니다. webpack은 성능과 로딩 시간을 중요하게 생각하여 이러한 문제를 해결할 수 있는 도구로 등장했습니다.

Entry

번들링을 시작할 진입점

엔트리포인트는 웹팩이 내부의 디펜던시 그래프를 생성하기 위해 사용해야하는 모듈

• 웹팩은 엔트리포인트가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.

• 기본값은 src/index 이지만 webpack 설정으로 entry 속성으로 커스텀 가능

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
}

Output

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할

• 기본 출력 파일은 ./dist/main.js, 로 생성되고 기타 파일은 ./dist 내부에 생성되도록 설정됨

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'name.js'
  }
}

__dirname 이란?

• 노드에서 기본적으로 지정된 값

• webpack.config.js이 놓여있는 위치에 폴더를 의미

Loaders

• 웹팩은 기본적으로 JSON, JS 파일만 이해한다.

  • 그 외에 파일 유형들의 처리를 로더에게 위임

• 로더를 이용하면 웹팩이 다른 유형의 파일들을 처리하거나 웹팩이 이해할수 있는 모듈로 변환하여 사용

• 로더는 웹팩 설정에 두 가지 속성을 갖는다.

  • 변환이 필요한 속성들을 판별하는 test (어떤 종류의 파일을 임포트했을 때 사용할 로더인지 설정)

  • 변환을 수행하는데 사용되는 로더를 가리키는 use

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'name.js'
  },
  module: {
  // 'require(), import()문 내에서 '.txt'파일로 확인되는 경로를 발견하면 
  // 번들에 추가하기 전 raw-loader를 사용해 변환
    rules: [{ test: /\.txt$/, use: 'row-loader'}]
  }
}

Plugins

• 플러그인은 활용하여 번들을 최적화하거나, 에셋을 관리, 또는 환경변수 주입 등 광범위한 작업을 수행

• 플러그인은 require()를 통해 플러그인을 요청하고 "plugins" 배열에 추가해야 한다.

• 대부분의 플러그인은 옵션을 통해 커스텀 가능

• 다른 목적으로 플러그인을 여러번 사용하도록 설정할 수 있으므로 new 연산자로 호출하여 플러그인 인스턴스를 만들어야함

• html-webpack-plugin 은 생성된 모든 번들을 자동으로 삽입해 애플리케이션용 HTML을 생성

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 플러그인에 접근하는데 사용됨

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'row-loader'}]
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
}

Mode

• mode 파라미터를 development, production, 또는 none을 설정하면 웹팩에 내장된 환경 별 최적화를 활성화함

• 기본값은 production

• development

  • DefinePlugin의 process.env.NODE_ENV를 development로 설정

  • 모듈과 청크에 유용한 이름을 사용함

• production

  • process.env.NODE_ENV 를 production으로 설정

  • 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 망글이름 (mangled name)을 사용 가능

• none

  • 기본 최적화 옵션에서 제외

module.exports = {
  mode: 'proudction'
}

Tree shaking

• 사용하지 않는 코드를 번들링에서 제거

• ES Module 방식으로 작성하면 간편하게 Tree Shaking 설정 가능

• lodash는 내부적으로 require를 사용한 패키지로 Tree shaking이 되지 않는다.

  • lodash-es는 ES Module 방식으로 제공

esm은 정적으로 동작하고 빌드시점에 분석(import, export를 보고 의존성 관계 파악)하기 때문에 불필요한 코드를 파악해서 제거가 가능하다.

• require 구문 즉, 동적으로 동작하는 CJS는 분석시점이 런타임이기 때문에 불필요한 코드를 파악하는것이 어려움

Transpiler

• 웹팩은 번들링하는데 집중하기 때문에 트랜스파일을 하지 않는다.

• 번들링 전 전처리 작업으로 로더를 통해 트랜스파일 작업을 진행

DevServer

• 일련의 명령어들로 일일이 커맨드 입력하여 수정사항을 반영하는거 귀찮음

• devServer 설정을 통해 수정사항을 알아서 반영하도록 설정

  • hot reload replacement

• webpack-dev-server

• pnpm exec webpack serve

module.exports = {
  devServer: {
    port: 3000,
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
  },
}

SourceMap

• 디버깅을 할 때 번들링 결과물로 알려주기 때문에 쉽지 않다.

• 이럴 때 소스맵을 설정하여 개발환경의 코드를 기준으로 체크 가능

• Production Mode인 경우는 X

module.exports = {
  devtool: "inline-source-map",
}

Serve

// package.json
"script": {
  "dev": "webpack serve",
  "build": "webpack --mode production",
  "start" :"serve dist -p 4000",
}

• 개발 서버는 public/과 dist/ 를 적절히 활용해주지만 빌드할 때는 X

• 그래서 public/ 파일들을 dist/로 옮겨주는 작업이 필요하다.

• 위 용도로 사용되는 플러그인이 copy-webpack-plugin

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "./public", to: "./" filter: (resourcePath) => {
            return !resourcePath.endsWith("index.html");
          },
       }],
    }),
  ],
};

to 속성을 지정하지 않으면 output으로 지정된 path로 카피된다.

Env

• 환경마다 다른 옵션을 지정하고 싶은 경우 객체를 익스포트 하지말고 설정 객체를 반환하는 함수로 만들자.

• 첫번째 인자로 env, 두번째 인자로 mode 가 들어온다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = (env, { mode }) => ({
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  mode: "development",
  module: {
    rules: [
      // {
      //   test: /\.(?:js|mjs|cjs)$/,
      //   use: {
      //     loader: "babel-loader",
      //     options: {
      //       presets: ["@babel/preset-env"],
      //     },
      //   },
      //   exclude: /node_modules/,
      // },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "swc-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "./public",
          to: "./",
          filter: (resourcePath) => {
            return !resourcePath.endsWith("index.html");
          },
        },
      ],
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    port: 3000,
    compress: true,
  },
  // 환경에 따라 설정 분기
  devtool: mode === 'production' ? false : "inline-source-map",
});