[Webpack] CSS 설정법

Webpack은 JavaScript 모듈 번들러로서, JavaScript, CSS, 이미지 등 모든 종류의 파일을 하나의 파일로 번들링할 수 있습니다. Webpack을 사용하여 CSS 파일을 번들링하려면 다음 단계를 따르세요:

1. Webpack 설치하기: 먼저 Webpack을 설치해야 합니다. npm install --save-dev webpack webpack-cli 명령어를 실행하여 Webpack을 설치합니다.
2. CSS 로더 설치하기: Webpack은 CSS 파일을 이해하지 못합니다. 따라서 CSS 파일을 로드하고 해석하기 위해 CSS 로더를 설치해야 합니다. npm install --save-dev style-loader css-loader 명령어를 실행하여 style-loader와 css-loader를 설치합니다.
3. 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'],
      },
    ],
  },
};

 

위 코드에서 entry는 Webpack이 번들링할 파일의 진입점을 나타내는 속성입니다. output은 Webpack이 생성할 번들 파일의 경로와 이름을 정의하는 속성입니다. module.rules는 Webpack이 파일을 로드할 때 사용할 로더를 정의하는 속성입니다. 여기서는 CSS 파일을 로드하기 위해 test: /\.css$/와 use: ['style-loader', 'css-loader']를 사용합니다.

1. CSS 파일 로드하기: 이제 CSS 파일을 JavaScript 파일에서 로드할 수 있습니다. 예를 들어 index.js 파일에서 import './style.css';와 같이 작성하면 Webpack이 이 파일을 로드하고 번들링된 파일에 CSS 코드를 추가합니다.
2. Webpack 실행하기: Webpack을 실행하려면 npx webpack 명령어를 실행합니다. 이 명령어는 Webpack이 webpack.config.js 파일을 찾아 실행하도록 합니다.

이제 Webpack을 사용하여 CSS 파일을 번들링할 수 있습니다.