# Настройка сборки CSS в бандл в Webpack

Изученный способ добавления 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'], }, ], }, };`

Выполните описанные настройки.

← →
↑