웹팩 주요 속성 4가지

ME2DESIGNER.COM·2022년 4월 4일
0
post-thumbnail

웹팩 주요 속성 4가지

  1. entry (상세내용)
    웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로
    module.exports = {
      // ...
      entry: "./src/index.js",
    };
  2. output (상세내용)
    웹팩을 돌리고(빌드) 난 결과물의 파일 경로를 의미
    module.exports = {
      // ...
      output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist"),
      },
    };
  3. loader (상세내용)
    로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성
    module.exports = {
      // ...
      module: {
        rules: [],
      },
    };
  4. plugin (상세내용)
    플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할
    module.exports = {
      // ...
      plugins: [],
    };



로더 순서의 중요성

특정 파일에 대해 여러 개의 로더를 사용하는 경우 로더가 적용되는 순서에 주의해야 합니다. 로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용됩니다.

예시

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ]
  }
}

위 로더 속성 기준으로 sass-loadercss-loaderstyle-loader 순서로 실행이 된다.

  1. sass-loader : SCSS 파일을 CSS 파일로 변환
  2. css-loader : 웹팩에서 CSS 파일을 인식(import 처리)
  3. style-loader : <head>안에 CSS 파일 내용을 인라인 스타일 태그 추가

만약, 1번, 2번 순서가 바뀐다면 SCSS 파일을 CSS 변환하지 못하여 빌드 단계에서 오류가 발생된다. 이러므로 로더 추가시 기능을 이해하고 적용 순서 고려해야 될 것 이다.

profile
UI 마크업 개발자 장지훈입니다.

0개의 댓글