Wondering what’s next for npm?Check out our public roadmap! »

    @noxx/webpack-tidy-plugin

    3.0.1 • Public • Published

    Webpack Tidy Plugin

    Build Status codecov npm version

    TL;DR - Keeps your output directories tidy when outputting files in watch-mode (doesn't work when using Webpack's Dev Server).

    wp-tidy-plugin-01

    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.


    Install

    yarn add -D @noxx/webpack-tidy-plugin
    # or 
    npm i -D @noxx/webpack-tidy-plugin

    Configuration

    Prop Type Default Description
    dryRun Boolean false Will not delete files, just displays info about what could be deleted.
    hashLength Number 5 The length of the hash in the bundle name.
    plugins: [
      new TidyPlugin({
        dryRun: true,
        hashLength: 8,
      }),
    ],

    I have a couple example files that demonstrate common setups.

    • webpack.config.js utilizes path, publicPath, and filename in the output section. This setup assumes there'll ever only be one output directory.
    • webpack.config-nopath.js allows for a more custom output setup. You'll notice that there's just a filename specified with the output path included. Then the ExtractTextPlugin pulls any styles from the js files and dumps them in a css path.

    Notes

    • This only works when using the watch option for 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.

    Install

    npm i @noxx/webpack-tidy-plugin

    DownloadsWeekly Downloads

    43

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    7.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar