Webpack Tidy Plugin
TL;DR - Keeps your output directories tidy when outputting files in watch-mode (doesn't work when using Webpack's Dev Server).
Imagine you have a project utilizing a node server that serves assets from a specific directory - and you want to use Webpack to rebuild bundles quickly but don't want to have those assets served via the Webpack server. Well, you'll most likely have WP output a manifest with the generated files, and the server will read from that to load the most current hashed bundle.
The catch to the above setup, is that you'll end up with a folder full of generated files while in watch mode, or when you run a one-off build (say for production) you may have some straggling files from a previous Dev session.
This plugin will ensure that there's only ever one version of the current bundle in your output directories.
yarn add -D @noxx/webpack-tidy-plugin# ornpm i -D @noxx/webpack-tidy-plugin
||Will not delete files, just displays info about what could be deleted.|
||The length of the hash in the bundle name.|
plugins:dryRun: truehashLength: 8
I have a couple example files that demonstrate common setups.
- webpack.config.js utilizes
outputsection. This setup assumes there'll ever only be one
- webpack.config-nopath.js allows for a
outputsetup. You'll notice that there's just a
filenamespecified with the output path included. Then the
ExtractTextPluginpulls any styles from the
jsfiles and dumps them in a
- This only works when using the
webpack, not while using the
webpack-dev-server. This is due to the dev-server not emitting actual files, but rather keeping them in memory.