> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/dizain/extracttextwebpackplugin.md).

# mini-css-extract-plugin

Извлекает стили из файла сборки в отдельный файл

Ранее для этих целей применялся [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). Но, после выхода Webpack 4 рекомендуют использовать [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)

Устанавливаем **mini-css-extract-plugin**

> yarn add -D mini-css-extract-plugin

В файл **webpack.config.js** добавляем

```javascript
// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const plugins = [
  ...,
  new MiniCssExtractPlugin('[name].css')
]

// Заменяем
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
```

Теперь CSS будут извлекаться в отдельный файл **./dist/main.css**

## HMR

Если нужна поддержка HMR, то в файле **webpack.config.js** нужно заменить:

```javascript
      ...
      const devMode = process.env.NODE_ENV !== 'production'
      ...
      
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
```

А в файле **package.json** заменить:

```
    ...
    "build": "cross-env NODE_ENV=production webpack --mode production",
    ...
```

## Минификация CSS

> yarn add -D uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin

Файл **webpack.config.js**

```javascript
...
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
...

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  ...
```