Webpack 개념에서 실무활용까지 -2

webpack 설정하기 loader, plugin

 

Webpack 개념에서 실무활용까지 -1 탄에서는 js, css, html까지만 번들링했는데 이번엔 자주 사용하는 loader와 plugin의 사용법에 대해 알아보자.

 

1. balel-loader 

babel은 최신 javascript 코드를 구형 브라우저에서도 호환되도록 변환하는 역할을 한다. 개발자는 최신 기능(es6 +)을 사용해도 다양한 환경에서 애플리케이션이 정상적으로 작동하도록 해줌. (ES6 + -> ES5로 변환한다.)

필수 loader라 1번으로 설정해준다.

 

설치 후 module에 아래와 같이 작성한다.

(webpack babel-loader docs)

npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: /node_modules/, // node_modules 은 변환하지 않는다
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

 

2. file-loader

image, font 등의 asset 파일을 type 경로에 복사해준다. 파일 경로가 자동으로 관리되므로 가독성과 유지보수가 좋아진다

webpack5 부터는 별도로 설치 안해도 된다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i, // 이미지 파일 처리
        type: 'asset/resource', // 파일을 복사해 해당 경로에 저장
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i, // 폰트 파일 처리
        type: 'asset/resource', 
      },
    ],
  },
};

 

3. sass-loader ()

scsss/sass 파일을 css로 변환

 

설치 ( webpack sass-loader docs)

npm install sass-loader sass webpack --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,,
        use: [
          "style-loader", "css-loader" // 기존의 css loader
          "sass-loader", // sass-loader 추가!
        ],
      },
    ],
  },
};

 

4. MiniCssExtractPlugin

1탄에서 설명하 html 파일처럼 css 파일을 별도의 파일로 추출한다.

production용으로 빌드하는 경우엔 js와 병렬 로딩이 가능하도록 css를 별도로 추출하는것이 좋다.

docs에는 style-loader와 함께 사용하지 말라고 권장하니 아래와 같이 사용해보자. (관련 git docs)

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader, // mode에 따라 다르게 실행해준다
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]), // plugin 사용법
};

 

5. dotenv-webpack (feat .env)

.env 파일에 작성한 환경변수도 아래와 같이 번들해주면 웹 브라우저에서도 사용 가능하다.

// .env 파일

API_URL: localhost:5500
NODE_ENV: development

const Dotenv = require("dotenv-webpack");

module.exports {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new Dotenv(), // .env 파일을 읽도록 설정
  ],
};

 

또는 아래와 같이 각각 설정해준다

const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config(); // .env 파일 변수를 가져온다

module.exports = {
  plugins: [
    new webpack.DefinePlugin({ webpack.DefinePlugin 으로 하나하나 정의한다.
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  mode: process.env.NODE_ENV || 'development',
};

 

그럼 아래와 같이 웹브라우저에서 구동하는 js파일에서 사용 가능하다.

 

// index.js

console.log(process.env.API_URL) // localhost:5500
console.log(process.env.NODE_ENV) // development

 

6. typescript 설정

typescript 를 사용한다면 아래와 같이 babel도 함께 작성하면 좋다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader', // Babel을 먼저 실행
            options: {
              presets: ['@babel/preset-env', '@babel/preset-typescript'], // TypeScript와 ES6+ 지원
            },
          },
          'ts-loader', // TypeScript 처리
            ],
            exclude: /node_modules/,
          },
        ],
      },
  }

 

그리고 build용량 줄이려고 webpack 많이 사용하는데 mode 지정에 따라 아래의 설정이 자동으로 적용된다.

 

mode: development

 - 소스 맵 생성, 코드 압축 비활성화(디버깅 용이), 경고 메시지 활성화 등 개발에 최적화된 기본 설정

mode: production

 - 코드 압축, 최적화, 트리 셰이킹 등 프로덕션에 최적화된 기본 설정

 

3탄은 회사에서 진행했던 electron webpack 설정과 배포 자동화까지의 내용을 담으려 합니당

읽어주셔서 감사합니다.👩‍💻