All Projects → johnagan → Clean Webpack Plugin

johnagan / Clean Webpack Plugin

Licence: mit
By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Clean Webpack Plugin

Uglifyjs Webpack Plugin
[deprecated] UglifyJS Plugin
Stars: ✭ 1,343 (-28.87%)
Mutual labels:  webpack, webpack-plugin
Terser Webpack Plugin
Terser Plugin
Stars: ✭ 1,687 (-10.65%)
Mutual labels:  webpack, webpack-plugin
Gas Webpack Plugin
Webpack plugin for Google Apps Script
Stars: ✭ 97 (-94.86%)
Mutual labels:  webpack, webpack-plugin
Obsolete Webpack Plugin
🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.
Stars: ✭ 148 (-92.16%)
Mutual labels:  webpack, webpack-plugin
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (-3.5%)
Mutual labels:  webpack, webpack-plugin
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-95.02%)
Mutual labels:  webpack, webpack-plugin
Everything Is A Plugin
Everything is a Plugin: Mastering webpack from the inside out. NgConf 2017
Stars: ✭ 123 (-93.49%)
Mutual labels:  webpack, webpack-plugin
Auxpack
A dashboard for monitoring Webpack build stats.
Stars: ✭ 86 (-95.44%)
Mutual labels:  webpack, webpack-plugin
Size Plugin
Track compressed Webpack asset sizes over time.
Stars: ✭ 1,665 (-11.81%)
Mutual labels:  webpack, webpack-plugin
Webpack Visualizer
Visualize your Webpack bundle
Stars: ✭ 1,664 (-11.86%)
Mutual labels:  webpack, webpack-plugin
Webpack Babel Multi Target Plugin
A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
Stars: ✭ 150 (-92.06%)
Mutual labels:  webpack, webpack-plugin
Worker Plugin
👩‍🏭 Adds native Web Worker bundling support to Webpack.
Stars: ✭ 1,840 (-2.54%)
Mutual labels:  webpack, webpack-plugin
Jest Webpack
Use jest with webpack.
Stars: ✭ 89 (-95.29%)
Mutual labels:  webpack, webpack-plugin
Fork Ts Checker Webpack Plugin
Webpack plugin that runs typescript type checker on a separate process.
Stars: ✭ 1,343 (-28.87%)
Mutual labels:  webpack, webpack-plugin
Ngc Webpack
Angular compiler-cli with webpack's loader chain.
Stars: ✭ 87 (-95.39%)
Mutual labels:  webpack, webpack-plugin
Webpack Tools
☕️Just a simple webpack sample project.
Stars: ✭ 106 (-94.39%)
Mutual labels:  webpack, webpack-plugin
Google Fonts Plugin
Webpack plugin that downloads fonts from Google Fonts and encodes them to base64
Stars: ✭ 83 (-95.6%)
Mutual labels:  webpack, webpack-plugin
Add Asset Webpack Plugin
Dynamically add an asset to the Webpack graph
Stars: ✭ 84 (-95.55%)
Mutual labels:  webpack, webpack-plugin
Rollbar Sourcemap Webpack Plugin
A Webpack plugin to upload sourcemaps to Rollbar
Stars: ✭ 127 (-93.27%)
Mutual labels:  webpack, webpack-plugin
Webpack Require From
Webpack plugin that allows to configure path or URL for fetching dynamic imports
Stars: ✭ 142 (-92.48%)
Mutual labels:  webpack, webpack-plugin

Clean plugin for webpack

npm MIT License Linux Build Status Windows Build Status Coveralls Status

A webpack plugin to remove/clean your build folder(s).

NOTE: Node v10+ and webpack v4+ are supported and tested.

About

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

Coming from v1? Please read about additional v2 information.

Installation

npm install --save-dev clean-webpack-plugin

Usage

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

Options and Defaults (Optional)

new CleanWebpackPlugin({
    // Simulate the removal of files
    //
    // default: false
    dry: true,

    // Write Logs to Console
    // (Always enabled when dry is true)
    //
    // default: false
    verbose: true,

    // Automatically remove all unused webpack assets on rebuild
    //
    // default: true
    cleanStaleWebpackAssets: false,

    // Do not allow removal of current webpack assets
    //
    // default: true
    protectWebpackAssets: false,

    // **WARNING**
    //
    // Notes for the below options:
    //
    // They are unsafe...so test initially with dry: true.
    //
    // Relative to webpack's output.path directory.
    // If outside of webpack's output.path directory,
    //    use full path. path.join(process.cwd(), 'build/**/*')
    //
    // These options extend del's pattern matching API.
    // See https://github.com/sindresorhus/del#patterns
    //    for pattern matching documentation

    // Removes files once prior to Webpack compilation
    //   Not included in rebuilds (watch mode)
    //
    // Use !negative patterns to exclude files
    //
    // default: ['**/*']
    cleanOnceBeforeBuildPatterns: [
        '**/*',
        '!static-files*',
        '!directoryToExclude/**',
    ],
    cleanOnceBeforeBuildPatterns: [], // disables cleanOnceBeforeBuildPatterns

    // Removes files after every build (including watch mode) that match this pattern.
    // Used for files that are not created directly by Webpack.
    //
    // Use !negative patterns to exclude files
    //
    // default: []
    cleanAfterEveryBuildPatterns: ['static*.*', '!static1.js'],

    // Allow clean patterns outside of process.cwd()
    //
    // requires dry option to be explicitly set
    //
    // default: false
    dangerouslyAllowCleanPatternsOutsideProject: true,
});

Example Webpack Config

This is a modified version of WebPack's Plugin documentation that includes the Clean Plugin.

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // installed via npm
const HtmlWebpackPlugin = require('html-webpack-plugin'); // installed via npm
const webpack = require('webpack'); // to access built-in plugins
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * With zero configuration,
         *   clean-webpack-plugin will remove files inside the directory below
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ template: './src/index.html' }),
    ],
};
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].