webpack-clean-obsolete-chunks

0.4.0 verified Sat Apr 25 auth: no javascript

A webpack plugin that removes obsolete chunk files during watch mode, particularly useful when using hashed output filenames. The current stable version is 0.4.0, released with irregular cadence. It supports webpack versions 2, 3, and 4, and Node.js versions 6, 7, 8. Key differentiators: it cleans files from child compilations with the 'deep' option and offers verbose logging. Unlike other clean plugins, it specifically targets chunks that are no longer emitted, preventing output directory bloat during development.

Common errors

error Cannot find module 'webpack-clean-obsolete-chunks' ↓

cause Module not installed or misspelled.

fix

Run 'npm install webpack-clean-obsolete-chunks --save-dev' and double-check the spelling.

error CleanObsoleteChunks is not a constructor ↓

cause Using ES6 import syntax with a package that exports as CommonJS.

fix

Use 'const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');' instead of import.

error TypeError: Cannot read property 'options' of undefined ↓

cause Plugin added without proper webpack instance or in invalid order.

fix

Ensure the plugin is added after the output configuration and within the plugins array.

Warnings

gotcha The 'deep' option only works if child compilations have unique names. ↓

fix Ensure each child compilation has a unique name. Uniqueness is required for proper cleanup.

gotcha Plugin may incorrectly delete files that are outside the current working directory (cwd). Fixed in v0.1.5. ↓

fix Update to v0.1.5 or later.

gotcha Plugin may not clean obsolete CSS files properly. Fixed in v0.1.8. ↓

fix Update to v0.1.8 or later.

gotcha Bug with async code-splitting caused obsolete files not being cleaned. Fixed in v0.1.9. ↓

fix Update to v0.1.9 or later.

Install

npm install webpack-clean-obsolete-chunks

yarn add webpack-clean-obsolete-chunks

pnpm add webpack-clean-obsolete-chunks

Imports

default export (CleanObsoleteChunks)
wrong
```
import CleanObsoleteChunks from 'webpack-clean-obsolete-chunks';
```
correct
```
const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
```
The package does not provide an ES module export; use CommonJS require. The default export is the plugin constructor.

Quickstart

Shows how to add the plugin to a webpack configuration with options. Assumes hashed filenames to see obsolete chunks being cleaned.

// webpack.config.js
const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new CleanObsoleteChunks({
      verbose: true,
      deep: false
    })
  ]
};