[Webpack] CSS Module 번들링

Intro.

CSS는 기본적으로 전역 속성이기에, 조금만 프로젝트 규모가 커져도 css 식별자 충돌이 자주 발생합니다. 그렇기에 CSS 모듈이란 개념이 탄생하였는데요, 이름 스코프를 로컬하게 쓸 수 있게 해주는 기술입니다. 빌드 프로세스 중, 기존 클래스 혹은 애니메이션 이름을 인코딩하는 형태로 목적을 달성합니다.

ex) class='myBox' -> class='1b2uib1ui2b3'

 

다만, css 다루는 방법도 모르는 웹팩한테 다루는 방법을 알려줘야하는 마당에, 당연하지만 css 모듈에 대해서도 어떤식으로 다뤄야하는지 알려줘야합니다.

 

Goal

Before

After

 

Method

 

1. 기존의 css 파일을 번들링하는 방식에 css모듈이 걸리므로, 기존 css방식에서 css모듈은 제외시켜줍니다.

 

 rules: [{
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
 }],

 

2. css 모듈용 규칙을 생성합니다.

 

localIdentName 속성값을 지정하는 것으로, css 속성에 대한 네이밍 방식을 결정할 수 있습니다.

 

밑에 코드는 production환경을 예시로 했기에, 일단 base64방식으로 인코딩 했습니다만, 다른 옵션들도 가능합니다

 

module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.module\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[hash:base64]'
              }
            }
          }
        ]
      }
    ]
  },

 

공식 문서에서 추천하는 방식은 다음과 같습니다.

 

 

https://github.com/webpack-contrib/css-loader#auto

GitHub - webpack-contrib/css-loader: CSS Loader