webpack-remove-empty-scripts

What is webpack-remove-empty-scripts?

The webpack-remove-empty-scripts package is a plugin for Webpack that helps to remove empty scripts generated during the build process. This can be particularly useful when using tools like MiniCssExtractPlugin, which can sometimes generate empty JavaScript files when only CSS is being extracted.

What are webpack-remove-empty-scripts's main functionalities?

Remove Empty Scripts

This feature allows you to remove empty JavaScript files that are generated during the Webpack build process. By including the RemoveEmptyScriptsPlugin in your Webpack configuration, you can ensure that any empty scripts are automatically removed, keeping your build output clean.

const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  plugins: [
    new RemoveEmptyScriptsPlugin(),
  ],
};

Other packages similar to webpack-remove-empty-scripts

clean-webpack-plugin

The clean-webpack-plugin is used to remove/clean your build folder(s) before building. While it doesn't specifically target empty scripts, it helps in keeping the build directory clean by removing old files. This can indirectly help in managing unnecessary files but does not specifically address the issue of empty scripts.

webpack-shell-plugin-next

The webpack-shell-plugin-next allows you to run shell commands before or after Webpack builds. You could use this to run a script that removes empty files, but it requires additional setup and scripting compared to the more focused webpack-remove-empty-scripts plugin.

README

webpack-remove-empty-scripts

A Webpack plugin to remove empty JavaScript files generated when using style only entries.

Problem this plugin solves

By default, Webpack creates a JavaScript file for every entry specified in the entry option - even when the entry is a style file (like SCSS or CSS).

Example:

module.exports = {
  entry: {
    styles: './styles.scss',
  },
}

Output:

dist/styles.css
dist/styles.js // <= unwanted empty JS file

When using mini-css-extract-plugin, CSS is correctly extracted into a separate file, but Webpack still emits an empty JavaScript file for each style-only entry - the known issue.

This plugin detects and removes those redundant .js files automatically, keeping your output clean.

Note

This plugin is compatible with Webpack 5. For Webpack 4 use webpack-fix-style-only-entries.

Install

npm install webpack-remove-empty-scripts --save-dev

See the full documentation on GitHub.