Webpack _ 번들링과 웹팩 1

번들링과 웹팩의 개념

번들링(Bundling)

• 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
• 프론트엔드 개발자에게 번들링이란, 사용자에게 웹 애플리케이션을 제공하기 위해 파일을 묶어서 패키지로 제공하는 것!

• 빌드(build) : 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
• 번들링(bundling) : 모듈 간의 의존성 관계를 파악해 그룹화 하는(묶어버리는) 작업

웹팩(Webpack)

• 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러
• 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 (HTML, CSS, JS, 이미지 파일 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링!)
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해 필요함

웹 팩의 핵심 개념

// webpack 예시 config 파일 

module.exports = {
  target: ["web", "es5"],
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

---

1. Target

module.exports = {
  target: ["web", "es5"],
};

target의 기본 값은 web이며, 적용하지 않으면 이 기본값으로 적용된다.
해당 파일의 target 배열에 들어간 es5는 작성된 코드를 es5 버전으로 컴파일 하겠다는 의미이다.

2. Entry

//기본값
module.exports = {
   ...
  entry: "./src/index.js",
};

//지정값
module.exports = {
   ...
  entry: "./src/script.js",
};

webpack에서 entry는 프론트엔드 개발자가 작성한 코드의 "시작점"이라고 말할 수 있다.
즉, 기본값 기준으로 index.js에서 하나의 코드를 적용하는 것부터 시작한다.

Entry 속성은 Entry point라고 하는데 Webpack은 이 Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있으며, 기본값은 './src/index.js'이지만 webpack 설정에서 지정값과 같은 방식으로 Entry 속성을 지정할 수 있다.

3. Output

const path = require('path');

module.exports = {
   ...
  output : {
    path: path.resolve(__dirname, "docs"), //절대 경로로 설정해야 함, 현재 경로 하위에 "docs" 폴더 만든다는 의미
    filename: "app.bundle.js",
    clean: true
  },
}

webpack에서 Output 속성은 만들어진 최종 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다.

기본 출력 파일의 경우 './dist/main.js'로, 생성된 파일의 경우 './dist' 폴더로 설정된다.
위의 코드에서는 output.filename과 output.path 속성을 이용해 webpack에 번들의 이름과 내보낼 위치를 알려주고 있는데, path 속성을 사용할 때는 path 모듈을 사용해야 한다.

4. Loader

module.exports = {
   ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_module/,
      },
    ],
  },
};

기본적으로 JS와 JSON 파일만 이해할 수 있는 webpack에 Loader 속성을 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에 사용할 수 있게 만들 수 있다.

상위 수준에서 loader는 webpack 설정에 몇 가지 속성을 가진다. (이 때, module.rules 아래에 정의해야 함)

• test : 변환이 필요한 파일들을 식별하기 위한 속성 (필수속성)
• use : 변환을 수행하는데 사용되는 로더를 가리키는 속성 (필수속성)
• exclude : 바벨로 컴파일하지 않을 파일이나 폴더를 지정 (이와 반대로 include 속성을 이용해 반드시 컴파일 해야 할 파일이나 폴더를 지정 가능하다)

5. Plugins

const webpack = require('webpack');
// 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해줌
const HTMLWebpackPlugin = require('html-webpack-plugin;);
// CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성하게 해줌
const MiniCssEctractPlugin = require('mini-css-extract-plugin');

module.exports = {
   ...
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new.MiniWebpackPlugin(),
  ],
};

webpack에서 Plugins 속성은 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 해준다.

plugins를 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야 하며, plugins 배열에 사용하고자 하는 plugin을 추가해야 한다. 대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있는데, 다른 목적으로 plugin을 여러 번 사용하도록 설정할 수 있게 때문에 new 연산자를 사용해 호출하여 plugin의 인스턴스를 만들어 주어야 한다.

6. Optimization

module.exports = {
   ...
  optimization: {
    minizer: [
      new CssMinizerPlugin(),
    ],
  },
};

버전 4부터의 webpack에서 Optimization 속성은 선택한 항목에 따라 최적화를 실행한다.

최적화하기 위해 지원되는 다양한 옵션 중 대표적 옵션에는 minimize와 minizer가 있다.

• minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(압축)시키는 작업 여부를 결정
• minizer : default minizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 할 수 있음.

참고로 위의 코드에서는 mini-css-extract-plugin에 관련된 파일을 최소화 하도록 지정하고 있다.