How to use the CleanWebpackPlugin function from clean-webpack-plugin

Find comprehensive JavaScript clean-webpack-plugin.CleanWebpackPlugin code examples handpicked from public code repositorys.

clean-webpack-plugin.CleanWebpackPlugin is a plugin for Webpack that removes the output directory before each build to ensure that only the files generated by the current build are present.

webpack.config.js

678
679
680
681
682
683
684
685
686
687
  }
  : [],
// target: ['web', 'es5'],
stats: "normal",
plugins: [
  // isEnvProduction && new CleanWebpackPlugin(),
  new Webpackbar(),
  // isEnvDevelopment && new DashboardPlugin(),

  // Watcher doesn't work well if you mistype casing in a path so we use

196

+ 3 other calls in file

webpack.config.js

GitHub: TaitoUnited/full-stack-template

54
55
56
57
58
59
60
61
62
63
  //   '~common': path.resolve(__dirname, 'src/common'),
  // },
},

plugins: [
  new CleanWebpackPlugin(),

  // No need to type check when analyzing the JS bundle
  // NOTE: if type checking fails -> the build will fail
  !analyzeBundle && new ForkTsCheckerWebpackPlugin(),

+ 3 other calls in file

How does clean-webpack-plugin.CleanWebpackPlugin work?

clean-webpack-plugin.CleanWebpackPlugin is a plugin for Webpack that removes the output directory before each build to ensure that only the files generated by the current build are present. When you use clean-webpack-plugin, you specify the output directory that you want to clean. When Webpack starts a new build, the plugin removes all of the files in the output directory, ensuring that only the files generated by the current build are present. clean-webpack-plugin also provides several options that allow you to customize its behavior. For example, you can specify a pattern that matches files that should not be deleted, or you can disable the plugin for certain builds. By default, clean-webpack-plugin is only executed in production mode. This is to prevent accidental deletion of files during development, when you might want to keep the output directory intact to allow for faster rebuilds. By using clean-webpack-plugin, you can ensure that the output directory only contains the files generated by the current build, avoiding any conflicts or issues that might arise from old files being present. This can help to ensure that your application is running in a consistent and stable environment.

config.base.js

GitHub: ASSERT-KTH/autographql

90
91
92
93
94
95
96
97
98
99
output: {
  path: distDir,
  publicPath: STATIC_URL,
},
plugins: [
  new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: distDir,
  }),
  new HtmlWebpackPlugin({
    API_URI: process.env.API_URI,

+ 4 other calls in file

webpack.config.js

GitHub: HIRANO-Satoshi/luncho

245
246
247
248
249
250
251
252
     * Note that the usage of following plugin cleans the webpack output directory before build.
     * In case you want to generate any file in the output path as a part of pre-build step, this plugin will likely
     * remove those before the webpack build. In that case consider disabling the plugin, and instead use something like
     * `del` (https://www.npmjs.com/package/del), or `rimraf` (https://www.npmjs.com/package/rimraf).
     */
    new CleanWebpackPlugin()
  ]
});

+ 2 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [new CleanWebpackPlugin()],
};

In this example, we start by requiring the clean-webpack-plugin package and the built-in path module. We define an entry point and an output directory for our Webpack configuration. We then create a new instance of the CleanWebpackPlugin class and add it to the plugins array in our Webpack configuration. This will cause the output directory to be cleaned before each build, ensuring that only the files generated by the current build are present. Note that in this example, we are using the default options for CleanWebpackPlugin. If you want to customize the behavior of the plugin, you can pass options to the constructor. For example, you can specify a different output directory to clean, or exclude certain files from being deleted. By using clean-webpack-plugin, you can ensure that your output directory is always clean and up-to-date, avoiding any conflicts or issues that might arise from old files being present.

webpack.config.js

GitHub: RosebudInteractive/MagiFront

48
49
50
51
52
53
54
55
56
57
    : isEnvDevelopment && 'static/js/[name].[hash:8].bundle.js',
  publicPath: paths.publicUrlOrPath,
},
plugins: [
  isEnvProduction
    ? new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
        cleanOnceBeforeBuildPatterns: [paths.appBuild],
      })
    : null,

+ 2 other calls in file

webpack.config.js

GitHub: fangyoga/wepack-loader

49
50
51
52
53
54
55
56
57
58
  }),
  // new BundleAnalyzerPlugin(),
];

if (production) {
  plugins.push(new CleanWebpackPlugin());
}

return {
  mode: development ? 'development' : 'production',

+ 3 other calls in file

vue.config.js

GitHub: Ajaxlover/weixin-h5

66
67
68
69
70
71
72
73
74
75
  // }
},

configureWebpack: config => {
  const plugins = [
    new CleanWebpackPlugin() // 自动清除dist文件夹
  ]
  // **生产环境配置**
  if (IS_PROD) {
    plugins.push(

Other functions in clean-webpack-plugin

Sorted by popularity

clean-webpack-plugin.CleanWebpackPlugin is the most popular function in clean-webpack-plugin (60 examples)

Other popular packages:

Home

About