웹팩의 4가지 주요 속성(loader, plugin)

Loader

module.exports = {
  module: {
    rules: []
  }
}

로더는 웹팩이 js가 아닌 HTML, CSS, Images, 폰트 같은 자원을 변환할 수 있도록 도와주는 속성이다. 로더는 module로 사용된다.

module을 주석 처리한 경우

module을 주석 처리하고 빌드를 하면 사진 처럼 오류가 난다. js 파일 안에 css가 들어갈 수 없어서 로더를 설정하라는 메시지이다.

예시

module.exports = {
  module: {
    rules: [
      {
        // 모든 css 확장자를 가진 파일에 use에 있는 loader를 적용하겠다라는 의미
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      //  모든 js 파일에 대해 babel을 돌리겠다는 의미
      // {
      //   test: /\.js$/,
      //   use: ["babel-loader"],
      // },
    ],
  },
};

 

css-loader는 css가 webpack 안으로 들어가도록 하는 것이고

style-loader는 head 안에 in-line style로 넣어주는 것이다.

 

여기서 유의할 점은 로더 적용 순서도 중요하다는 점이다. 로더는 오른쪽에서 왼쪽 순으로 적용된다. 따라서 style-loader와 css-loader

의 순서를 바꾸면 안된다.

---

Plugin

플러그인은 웹팩의 동작에 추가 기능을 제공하는 속성이다. 로더는 파일을 해석하는 것에 관여하고 플러그인은 결과물(output)의 형태를 바꿔준다.

예시

var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

MinCssExtracPlugin.loader은 CSS 파일을 별도로 추출하는 플러그인이다. 따라서 위 코드 같이 설정하고 빌드하면

이렇게 dist 폴더에 main.css가 생긴다. 이를 index.html에 가져가서 불러와 사용하면 된다.

그리고 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가할 수 있다.

 

-출처https://joshua1988.github.io/webpack-guide/concepts/wrapup.html#concepts-review

Wrap Up | 웹팩 핸드북