Webpack Remove Empty Scripts Plugin

Common errors

• TypeError: RemoveEmptyScriptsPlugin is not a constructor

  cause Attempting to import the default export (the plugin class) as a named export using curly braces, or incorrect CommonJS `require` usage.
  fix For ESM, change `import { RemoveEmptyScriptsPlugin } from 'webpack-remove-empty-scripts';` to `import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';`. For CommonJS, use `const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');`.

• Module not found: Error: Can't resolve 'webpack-remove-empty-scripts'

  cause The package `webpack-remove-empty-scripts` has not been installed or is not correctly located in `node_modules`.
  fix Install the package as a development dependency: `npm install --save-dev webpack-remove-empty-scripts` or `yarn add --dev webpack-remove-empty-scripts`.

• Peer dependency webpack (>=5.32.0) not met.

  cause The installed version of `webpack` in your project is older than the minimum required by `webpack-remove-empty-scripts`.
  fix Upgrade your project's Webpack version to `5.32.0` or higher: `npm install webpack@latest` or `yarn upgrade webpack`.

Warnings

• breaking The default plugin execution stage was reverted in v1.0.1. It now executes before other plugins, which is generally the desired behavior but might alter how it interacts if you previously relied on its post-processing in versions v0.8.2-v0.8.4.
  Fix: If you need the previous `v0.8.2-v0.8.4` behavior where the plugin ran after most others, configure it explicitly with `new RemoveEmptyScriptsPlugin({ stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS })`.
• gotcha This plugin is designed exclusively for Webpack 5. It is not compatible with Webpack 4, and attempting to use it with older Webpack versions will likely result in build failures or simply no effect.
  Fix: For Webpack 4 projects, use `webpack-fix-style-only-entries` instead. Ensure your project's `webpack` dependency meets the `'>=5.32.0'` requirement.
• gotcha While the default `stage` was optimized in v1.0.1, in very complex Webpack configurations with multiple plugins, you might still need to explicitly configure the `stage` option if other plugins temporarily require the presence of all generated script files before removal.
  Fix: If you encounter unexpected interactions with other plugins, try adjusting the plugin's execution order by setting the `stage` option, e.g., `stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS`.

Install

• npm install webpack-remove-empty-scripts npm
• yarn add webpack-remove-empty-scripts yarn
• pnpm add webpack-remove-empty-scripts pnpm

Imports

• RemoveEmptyScriptsPlugin
  wrong:

  import { RemoveEmptyScriptsPlugin } from 'webpack-remove-empty-scripts';

  correct:

  import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';

  The plugin class is the default export of the package. For CommonJS, use `const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');`
• STAGE_AFTER_PROCESS_PLUGINS
  wrong:

  import { STAGE_AFTER_PROCESS_PLUGINS } from 'webpack-remove-empty-scripts';

  correct:

  import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
  // Then use: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS

  This constant is a static property of the `RemoveEmptyScriptsPlugin` class, used for fine-tuning the plugin's execution stage within Webpack's build process.
• RemoveEmptyScriptsPluginOptions

  import type { RemoveEmptyScriptsPluginOptions } from 'webpack-remove-empty-scripts';

  This TypeScript type definition can be used for explicit type hinting of the plugin's configuration options when defining a Webpack configuration.

Quickstart

This configuration demonstrates how to integrate `webpack-remove-empty-scripts` into a Webpack 5 setup, ensuring that empty JavaScript files are not generated for style-only entry points when using `mini-css-extract-plugin`.

import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';

export default {
  entry: {
    main: './src/index.js',
    styles: './src/styles.scss', // This will generate an empty JS file without the plugin
    legacyCss: './src/legacy.css',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    clean: true, // Clean the output directory before emit.
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] }
        }
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    new RemoveEmptyScriptsPlugin({
      // Optional: Set to true for more detailed output during build
      verbose: process.env.NODE_ENV === 'development',
      // Optional: If you need to revert to v0.8.2-0.8.4 behavior for specific compatibility
      // stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
    }),
  ],
  devtool: 'source-map',
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};