[ VanillaJS ] webpack5 - MiniCssExtractPlugin

MiniCssExtractPlugin

css 파일을 추출해주는 플러그인이다. HTML에 css를 알아서 link해준다.

yarn add -D mini-css-extract-plugin

vs style-loader

style-loader는 dev환경에서 사용하길 추천한다.

• style-loader는 injects CSS into the DOM using multiple하기에 css파일을 추출하는 것보다 더 빠르다.

MiniCssExtractPlugin은 prod환경에서 사용을 추천한다.

• css파일을 추출하게 되면 css파일과 js파일을 parallel load할 수 있어 사용자가 페이지를 빠르게 load할 수 있다.

style-loader를 사용하지않는다면 제거해주도록 하자.

yarn remove style-loader

✨ 실습

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// ...

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    },
    //...
  ]
}

//...

plugins: [
  new MiniCssExtractPlugin()
  //...
]

현재 mini-css-extract-plugin 2.5.0 버전에서 타입에러가 발생한다.
편법으로 { default: MiniCssExtractPlugin } 함으로 해결했다. ( 출처 )

2.5.1 버전에서 핫픽스 되었다.

yarn build

아래와 같이 빌드된 것을 볼 수 있다.

dist
   ㄴ home.bundle.js
   ㄴ home.css
   ㄴ index.html

🎉🎉

dev모드에서는 style-loader를 사용하고 prod모드에서는 MiniCssExtractPlugin 사용하고 싶다면.

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,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
};