CSS는 웹 개발에서 중요한 요소 중 하나입니다. 웹페이지의 스타일을 지정하거나 레이아웃을 구성하는 데 사용됩니다. 웹 개발 과정에서는 여러 개의 CSS 파일이 생성되는데, 이를 웹사이트에서 효율적으로 사용하기 위해 번들링하는 것이 좋습니다. 이번 글에서는 Webpack을 사용하여 CSS 파일을 번들링하는 방법을 다루겠습니다.

Webpack 설치하기

Webpack을 사용하기 위해 먼저 Node.js가 설치되어 있어야 합니다. Node.js를 설치하지 않았다면 공식 웹사이트에서 다운로드하여 설치하세요. 설치가 완료되었다면 npm(Node Package Manager)을 사용하여 Webpack을 설치합니다.

npm install webpack --save-dev

CSS Loader 설치하기

Webpack은 JavaScript 모듈 번들러이므로 CSS 파일을 직접 인식하지 못합니다. 따라서 CSS 파일을 로드하는데 필요한 CSS Loader를 설치해야 합니다.

npm install css-loader style-loader --save-dev

이제 CSS Loader를 사용하여 CSS 파일을 번들링해 보겠습니다.

Webpack 설정하기

Webpack 설정 파일인 webpack.config.js를 생성하고 다음 내용을 추가합니다.

const path = require('path');

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

위의 설정은 src/index.js 파일을 엔트리로 사용하여 번들링 결과를 dist/bundle.js 파일로 출력합니다. 또한 CSS 파일을 로드하기 위해 style-loader와 css-loader를 사용하도록 설정되어 있습니다.

CSS 파일 번들링하기

CSS 파일을 번들링하기 위해 src/styles.css 파일을 생성하고 해당 파일에 CSS 코드를 작성합니다.

body {
  font-family: sans-serif;
  background-color: #f1f1f1;
}

h1 {
  color: #333333;
  text-align: center;
}

이제 src/index.js 파일을 생성하고 다음과 같이 CSS 파일을 가져옵니다.

import './styles.css';

이제 웹팩을 실행하여 CSS 파일을 번들링합니다.

npx webpack

번들링이 완료되면 dist/bundle.js 파일과 함께 dist/styles.css 파일이 생성됩니다. 새로운 HTML 파일에 번들링된 스타일을 적용해 보세요.

결론

Webpack을 사용하여 CSS 파일을 번들링하는 방법을 알아보았습니다. CSS Loader와 Webpack 설정을 적절히 구성함으로써 여러 개의 CSS 파일을 번들링하여 웹사이트에서 효율적으로 사용할 수 있습니다. 이를 통해 웹 개발 과정에서 스타일링 작업을 더욱 편리하고 유지보수하기 쉬워질 것입니다.