The Webpack plugin removes empty JavaScript files generated when using styles.
---
[](https://www.npmjs.com/package/webpack-remove-empty-scripts "download npm package")
[](https://nodejs.org)
[](https://webpack.js.org/)
[](https://github.com/webdiscus/webpack-remove-empty-scripts/actions/workflows/test.yml)
[](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
[](https://www.npmjs.com/package/webpack-remove-empty-scripts)
## The problem this plugin solves
Webpack generates a JS file for each resource defined in the entry option.
For example, you have a style file in the `entry` option:
```js
module.exports = {
entry: {
styles: './styles.scss',
},
}
```
The following files are generated in the output directory:
```
dist/styles.css
dist/styles.js // <= unexpected empty JS file
```
This plugin removes generated empty JS files.
> **Warning**
>
> This plugin is the `Emergency Crutch` 🩼 for the [mini-css-extract-plugin issue](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151).\
> The `mini-css-extract-plugin` extract CSS, but not eliminate a generated empty JS file.
>
> **Note**
>
> This plugin is compatible with `Webpack 5`. For `Webpack 4` use [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries).
## Install
```console
npm install webpack-remove-empty-scripts --save-dev
```
## Usage with mini-css-extract-plugin
The example of webpack.config.js:
```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
entry: {
'main' : './app/main.js',
'styles': ['./common/styles.css', './app/styles.css']
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
},
]
},
plugins: [
// removes the empty `.js` files generated by webpack
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
],
};
```
See the [plugin options](#options).
---
## Usage with html-webpack-plugin
> ✅ It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin] instead of:
>
> - html-webpack-plugin
> - mini-css-extract-plugin
> - webpack-remove-empty-scripts
### Highlights of html-bundler-webpack-plugin
- **Prevents generating unexpected empty JS files.**
- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry) can be an HTML template.
- Source **scripts** and **styles** can be specified directly in HTML using `
Hello World!
