[React] 번들링, webpack

번들링

bundle은 명사로는 '묶음', 동사로는 '~을 마구 싸 보내다[밀어 넣다]'라는 뜻이다.
프로그래밍에서 번들링은 모듈화 했던 자바스크립트 파일들을 하나로 묶어준다는 뜻이다.

이러한 번들링을 수행하기 위해 번들러(bundler)가 필요하다.

웹팩 (webpack)

webpack은 번들러로써 여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구이다.

엔트리 (Entry)

엔트리(Entry), 또는 엔트리 포인트(Entry Points)는 webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈이다.
webpack은 엔트리 포인트가 의존하는 다른 모듈과 라이브러리를 찾아낸다.

출력 (Output)

Output은 생성된 번들을 내보낼 위치와 번들 파일의 이름을 webpack에 알려주는 역할을 한다.

로더 (Loaders)

로더는 webpack이 JS, JSON 파일 외에 다른 유형의 파일을 처리할 수 있게 한다.

플러그인 (Plugins)

플러그인을 활용하여 번들을 최적화하거나, asset을 관리하고, 환경 변수 주입 등 광범위한 작업을 수행할 수 있다.

webpack.config.js (React 예시)

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",		// 엔트리 (Entry)
  output: {						// 출력 (Output)
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",	// 로더 (Loaders)
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [					// 플러그인 (Plugins)
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ],
  mode: "production",
};

References

[Tistory] humanwater. 번들링(Bundling) 개념 및 사용 이유
[Youtube] 생활코딩. Webpack - 3. 웹팩의 도입
[webpack] Concepts