CSS 파일 개별 추출

CSS 파일 추출 플러그인

MiniCssExtractPlugin 플러그인은 CSS 파일을 별도 파일로 추출(extract) 합니다. CSS 코드가 포함된 JS 파일 별로 CSS 파일을 생성합니다. CSS 및 SourceMaps의 온 디멘드 로딩(On Demand Loading) 기능도 지원합니다.

온 디멘드(On Demand)는 "요구가 있다면 언제든지"란 의미입니다. 즉, ODL은 "언제든지 요구할 때 로딩한다"는 의미로 이해할 수 있습니다.

이 방법은 최적화에 사용됩니다. 전체 웹페이지의 리소스를 한 번에 로딩하는 것이 아니라, 사용자가 필요할 때까지 미뤄두다 원하는 시점(요구되는 순간)에 리소스를 로딩합니다. 대표적인 예로 인피니티(무한) 스크롤을 들 수 있습니다. 사용자가 스크롤 할 때 리소스를 "온 디멘드 로딩"합니다.

mini-css-extract-plugin 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

패키지 설치

npm i mini-css-extract-plugin -D

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    // 플러그인 인스턴스 생성
    new MiniCssExtractPlugin({
      // 플러그인 옵션 설정
      linkType: false, // 기본 값 'text/css'
    }
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        // CSS Loader → MiniCssExtractPlugin.loader 로더를 사용해 추출 
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    ]
  }
}

"style-loader"와 MiniCssExtractPlugin.loader를 함께 사용하면 안됩니다!

모드 별, 플러그인 설정

mini-css-extract-plugin 플러그인은 JavaScript 파일 안에서 호출되는 스타일 코드를 청크(Chunk)에서 파일로 추출하므로 개발 중에는 플러그인을 사용하지 않는 것이 좋습니다. 즉, 개발이 끝난 후 배포 할 때 사용하면 좋습니다.

개발 모드에서는 CSS를 여러 번 수정하고 DOM에 <style> 요소의 코드로 주입하는 것이 훨씬 빨리 작동하므로 "style-loader"를 사용하고, 배포 모드에서는 MiniCssExtractPlugin.loader를 사용하려면 다음과 같이 설정합니다.

이 설정은 환경 변수 등록 후, 정상 작동합니다. 환경 변수 등록 후에 사용하여야 합니다!

아래 "스타일 로더 설정" 코드는 Sass, SCSS, CSS 파일을 모두 처리하도록 변경되었습니다.

webpack.config.js

const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

/* -------------------------------------------------------------------------- */

// 개발 모드 감지
const isDevMode = process.env.NODE_ENV.includes('dev')

/* -------------------------------------------------------------------------- */

// 개발,배포 모든 모드에서 사용되는 Webpack 플러그인 목록(배열)
const plugins = [
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'development',
  }),
]

// 배포 모드인 경우 plugins에 배포용 플러그인 추가
if (!isDevMode) {
  plugins.push(
    new MiniCssExtractPlugin({
      linkType: false,
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    })
  )
}

/* -------------------------------------------------------------------------- */

module.exports = {
  // 플러그인 설정
  plugins,
  module: {
    rules: [
      // 스타일 파일 로더
      {
        test: /\.(sa|sc|c)ss$/i,
        exclude: /node_modules/,
        use: [
          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      // ...
    ],
  },
  // ...
}

빌드 명령을 실행하여 출력한 결과를 살펴보면, 개별 CSS 파일이 성공적으로 생성되었습니다.

참고

MiniCssExtractPlugin | webpackwebpack