Loader / Plugin

Loader

• webpack은 기본적으로 javascript와 JSON 파일만 이해할 수 있기 때문에 webpack이 css, jpg등 다른 형식의 파일을 이해할 수 있도록 처리한다.
• Loader는 test, use두가지 속성을 가지고있다.
• 아래에서 첫번째 rule을 살펴보면 sass, scss, css 파일을 sass-loader, css-loader를 사용하여 처리한다는 의미이다!
  • import, require 문에서 sass, scss, css 파일이 발견되면 번들에 추가하기 전에 sass-loader, css-loader로 변환을 먼저해버려!
  • sass-loader로 처리된 리소스가 css-loader로 전달됨! -> 역순으로 처리

module.exports = {
  entry: './src/index.js',
  output: {
    filname: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        // node_modules 디렉토리 제외
        exclude: /node_modules/,
        use: ['css-loader', 'sass-loader']
      },
      {
        test: /\.js$/, 
        use: {
          loader: 'babel-loader',
          options: {
            // preset -> Babel 플러그인을 묶어놓은 설정 그룹
            // 사용자가 별도로 특정 버전의 Javascript 문법을 지정할 필요 없음
            presets: ['@babel/preset-env']
          }
        } 
      },
      { 
        test: /\.ts$/, 
        use: 'ts-loader' 
      },

    ],
  },
}

 

Plugin

• loader는 특정 유형의 파일(모듈)을 변환하는데 사용되고 플러그인을 활용해서 번들을 최적화할 수 있고 환경변수 주입등 번들이 일어난 후의 일을 수행해줄 수 있다!
  • 아래에서 사용하는 Plugin 예시 
  • CleanWebpackPlugin, HtmlWebpackPlugin, HMRPlugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filname: 'bundle.js'
  },
  module: {
    ...
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        title: 'webpack-react-start-kit',
        template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
    }),
    new webpack.HotModuleReplacementPlugin(),
  ]
}

• 위에서 사용하는 플러그인을 잠시 설명하면 아래와 같다
• CleanWebpackPlugin: 빌드 전에 빌드 디렉토리를 청소하는 역할을 한다. 이전 빌드 결과를 제거하여 깨끗한 상태로 빌드를 시작할 수 있다.
• HtmlWebpackPlugin: HTML 파일을 생성하거나 기존 HTML 파일을 기반으로 새 HTML 파일을 생성하여 빌드 결과물에 자동으로 연결한다. 설정에 따라 빌드된 CSS 및 JavaScript 파일에 대한 링크를 자동으로 삽입한다.
  • HTML 템플릿 사용: HtmlWebpackPlugin은 지정한 HTML 템플릿 파일을 기반으로 HTML을 생성한다. 일반적으로 프로젝트에서 사용하는 기본 템플릿을 지정하고, 해당 템플릿에 빌드 결과물에 대한 자동 삽입 위치를 설정할 수 있다.
  • 자동 파일 연결: 템플릿에서 지정한 위치에 CSS, JavaScript 파일과 같은 빌드 결과물을 자동으로 연결해줍니다. 이렇게 함으로써 개발자는 직접 파일 경로를 관리하지 않아도 되며, Webpack이 자동으로 최신 파일 경로를 인식하여 삽입한다.
  • 캐싱 관리: HtmlWebpackPlugin은 빌드 결과물에 해시를 추가하여 파일이 변경될 때마다 브라우저가 새로운 파일을 가져오도록 한다. 이는 캐싱을 통한 성능 최적화를 가능하게 한다.
• MiniCssExtractPlugin: CSS 파일을 별도로 추출하여 단일 파일로 생성하는 역할을 한다. 일반적으로는 CSS를 번들링한 JavaScript 파일에 포함되지 않고, 별도의 CSS 파일로 생성하여 로딩 성능을 최적화한다
  • 주로 프로덕션에서 사용하는 것이 일반적이다.!! CSS를 별도의 파일로 추출하여 효율적인 캐싱, 로딩 및 성능 최적화를 가능하게 하기 때문이다.
  • 일반적으로 개발환경에서는 CSS를 번들링된 Javascript 파일에 포함해서 빠른 빌드와 디버깅을 위해 사용하기 때문에 개발중에는 CSS를 별도 파일로 추출하지 않아도 되어 편리하다!
  • 프로덕션에서는 CSS 파일을 별도로 추출해서 로딩 성능을 최적화하고 캐싱을 향상시키기 위해 사용된다. 사용자가 웹 사이트 방문할 때 캐싱된 CSS 파일을 로드하기 때문!
    
    • 따라서 개발환경에서는 style-loader와 같은 방법으로 CSS를 번들링된 Javascript 파일에 포함시켜 개발 경험을 개선시키고 프로덕션에서는 Plugin을 이용해 사용자의 경험을 개선!
• webpack.HotModuleReplacementPlugin(): HMR(Hot Module Replacement)을 활성화하여 코드 수정 시 브라우저를 새로고침하지 않고도 모듈의 변경 사항을 실시간으로 반영하도록 돕는다. 
  • 일반적으로 프로덕션 환경에서는 이와 같은 빠른 반영과 모듈 변겨이 필요하지가 않고 성능 최적화, 안정성 등을 중심으로 프로덕션 빌드를 구성한다. 
  • VSCode로 개발할 때 코드를 save하고 별도로 웹 브라우저를 새로고침 하지 않아도 코드가 반영!
• 즉, 플러그인은 코드를 번들링하기 보다는 어플리케이션에 유틸리티를 부여한다고 볼 수 도 있을 것 같다~