Webpack에서 CSS 번들 빌드 설정
학습한 방식으로 CSS를 페이지에 추가하는 것은 별로 좋지 않을 수 있습니다. 종종 모든 CSS 파일을 스타일별 별도의 번들로 모으는 것이 더 편리합니다.
이를 위해서는 mini-css-extract-plugin 플러그인이 필요합니다. 설치해 봅시다:
npm install mini-css-extract-plugin --save-dev
플러그인을 임포트합니다:
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
plugins 설정에 추가합니다:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
이제 style-loader를 플러그인의 로더로 교체합니다:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
설명된 설정을 수행하세요.
