ch2. Loader와 Plugins

본 포스팅은 webpack 공식홈페이지와 인프런 강의를 참고합니다.

본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/Frontend-Basics/tree/main/about-webpack

CheoljongPaek/Frontend-Basics

웹팩, 로더와 플러그인?

 

 

 

배울 내용

1. loader와 plugin, 차이를 중점으로.
2. 목차2

1. loader와 plugin, 차이를 중점으로.

 

위의 그림을 천천히 꼼꼼하게 살펴본 뒤 아래 웹팩의 주요 속성 4가지를 보기 바란다.

웹팩은 (1)entry를 최초 진입점인 .js 파일 경로로 인식한다. entry에서 찾은 모듈들을 하나로 묶은 결과물을 (2)output으로 여기고, 우리는 output 속성에 어디에 어떤 명으로 저장을 할지 설정할 수 있다.

/* 1. entry와 output에 대한 설명 */
module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
}

---

  위에서 우리는 entry를 통해 모듈을 로딩하고, 한 개의 파일로 묶은 결과물을 반환했다. 하지만 '웹팩은 기본적으로 자바스크립트와 JSON 파일만 빌드할 수 있습니다.' 라는 말의 의미를 곱씹어봤을 때, 어떠한 설정 없이는 웹팩에서 HTML, CSS, Image 등 다른 소스들을 빌드할 수 없다. 이것이 우리가 각각에 파일 타입에 맞춰 (3)loader 속성을 지정해줘야하는 이유이다.

 

빌드하기 전에, 우리는 loader 속성을 통해 다른 소스들을 빌드할 수 있도록 설정할 수 있다.

/* 2. loader 설정 추가 설명 */
const path = require('path');

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

rules 배열에 객체 한 쌍은 특정 파일들에 어떤 로더를 적용할지를 보여준다. test 속성은 정규 표현식으로 .css파일들을 선택한 것이고, use 속성을 통해 선택된 .css파일들에 'style-loader' 와 'css-loader'를 적용한다. use 속성을 사용할 때 주의해야할 것은, 로더는 오른쪽부터 실행된다는 사실이다. css-loader를 통해 .css파일을 읽어 값을 반환하고, 그 후 style-loader를 통해 html에 .css파일 값들을 style 태그를 넣게 된다. 위의 예제에서 우리는 ./dist/bundle.js 파일 하나를 생성하게 된다.

---

  위의 결과는 아쉽게도 확장성이 낮아서 실무에서 사용되는 방식은 아니다. 여기서 우리는 웹팩 (4)plugin을 사용해서 ./dist/bundle.js와 ./dist/main.css 파일 두 개의 파일을 결과로 받을 수 있다. 빌드된(번들된) 결과물을 처리하는 것이 플러그인이다.

로더는 각각의 파일을 해석하는데 쓰인다. 10개의 파일이 있으면 각각의 파일을 모듈화 할 때 10번 호출되는 것이 로더이다. 하지만 플러그인은 마지막에 딱 1번 호출된다. 

우리는 플러그인을 사용하여 bundle.js와 main.css 파일 두 개를 얻어야한다. 이 과정에서 로더인 'style-loader'는 더이상 필요 없기에 생략되었다. 우리는 html에 style태그를 추가하지 않고 main.css를 요청해서 사용할 것이다.

/* 3. 플러그인을 추가하여 설명 */
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 'style-loader' is useless here
        // use: ['style-loader', 'css-loader']
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ],
}

module.exports 객체 안에 plugins 속성을 추가하여 그 안에 필요한 플러그인을 가져와 배열 안에 넣은 뒤 필요한 부분에 부품처럼 사용한다. 플러그인의 배열에는 생성자 함수로 생성된 객체 인스턴스만 추가될 수 있으니 알아두자. 웹팩 공식홈페이지에서는 웹팩 기능들 대부분이 플러그인 인터페이스를 사용한다고 나와있고 수 많은 플러그인들을 홈페이지에서 제공한다[ https://webpack.js.org/plugins/ ]. 

 

자주 사용하는 웹팩 플러그인 정리(리액트 후 수정예정)

 

 

 

2. 목차

 

내용은 본고딕 L로 통일.

const a = "life";

 

 

👏이제 답할 수 있어야 하는 것들

하나. 웹팩의 주요 속성 4가지와 사용 방법?
둘. 로더와 플러그인의 차이는?
셋. 3