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

# Automated cleaning

### HTML

```
yarn add -D html-webpack-plugin
```

{% code title="webpack.config.js" %}

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    plugins: [
        new HtmlWebpackPlugin()
    ]

}
```

{% endcode %}

Из коробки будет искать html в `src/index.html`. Но удалит всю разметку, если она там была.

Плагин сформирует для сборки html страницу и подключит к ней файлы стилей и js.

Если нужен какой-то код, например `div#root`, то нужно создавать шаблон и скормить его плагину.

```javascript
module.exports = {

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

}
```

Если в шаблоне у нас есть подключение стилей и js, то вебпак продублирует это. Поэтому шаблону нужна просто разметка.

При таком сценарии webpack может поругаться на некий breaking change, который лечится путем установки последней версии плагина - `html-webpack-plugin@next`.

### Очистка файлов перед каждой сборкой

Чтобы перед каждым запуском вебпака автоматически удалялся билд, можно поставить доп плагин.

```
yarn add -D clean-webpack-plugin
```

И добавить его инициализацию в общий список плагинов (рекомендуют ставить первым в массиве).

```javascript
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// ...
{
    plugins: [new CleanWebpackPlugin()]
}
```