Webpack에서 CSS 번들 빌드 설정

학습한 방식으로 CSS를 페이지에 추가하는 것은 별로 좋지 않을 수 있습니다. 종종 모든 CSS 파일을 스타일별 별도의 번들로 모으는 것이 더 편리합니다.

이를 위해서는 mini-css-extract-plugin 플러그인이 필요합니다. 설치해 봅시다:

terminalnpm install mini-css-extract-plugin --save-dev

플러그인을 임포트합니다:

webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';

plugins 설정에 추가합니다:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
};

이제 style-loader를 플러그인의 로더로 교체합니다:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};