Delete Ghost Scripts Plugin

If an entry point only contains non-js files that will be extracted by a loader or plugin, webpack will still generate an empty script (where the content was supposed to be). This webpack plugin removes that unnecessary file.

This utility is incredibly useful when using plugins like MiniCssExtractPlugin, which extract files that otherwise would be added to the respective js scripts, thus creating that "ghost file".

Installation

npm i -D delete-ghost-scripts-plugin

Usage

The plugin needs no configuration at all. It will go over your entry chunks, removing the javasccripts files generated by those that do not import other scripts, only keeping the files that are really needed.

Example

module.exports = {
  entry: {
    index: [
      "scripts/index.js",
      "styles/index.css"
    ],
    about: "styles/about.css"
  },
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: `styles/[name].css`
    }),
    new DeleteGhostScriptsPlugin()
  ]
};

File Tree

src/
 ├── pages/
 │    ├── about.html
 │    └── index.html
 ├── scripts/
 │    └── index.js
 └── styles/
      ├── about.css
      └── index.css
webpack.config.js

When Compiled

• There will be no about.js in dist/scripts/

If no arguments are passed in, all chunk scripts not containing js files will be removed. If you only want this behaviour for some file types, you can do so by passing the extensions you do want to handle:

plugins: [
  new DeleteGhostScriptsPlugin("css")
]
// or
plugins: [
  new DeleteGhostScriptsPlugin(["css", "scss"])
]

This may be helpful if only some file types are being extracted.