How to use clean-webpack-plugin - 10 common examples

To help you get started, we’ve selected a few clean-webpack-plugin examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github iverenshaguy / book-a-meal / webpack.prod.babel.js View on Github external
/* eslint-disable import/no-extraneous-dependencies */
import webpack from 'webpack';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import CompressionPlugin from 'compression-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import Visualizer from 'webpack-visualizer-plugin';
import dotenv from 'dotenv';
import merge from 'webpack-merge';
import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
import CrittersWebpackPlugin from 'critters-webpack-plugin';

import common from './webpack.common.babel';

const cleanerPlugin = new CleanWebpackPlugin();
const optimizeCSSPlugin = new OptimizeCssAssetsPlugin({});
const momentLocalesPlugin = new MomentLocalesPlugin();
const crittersWebpackPlugin = new CrittersWebpackPlugin();

const terserPlugin = new TerserPlugin({
  cache: true,
  parallel: true,
  sourceMap: true
});

const compressionPlugin = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.html$/,
  threshold: 10240,
  minRatio: 0.8
});
github OriginProtocol / origin / dapps / marketplace / webpack.config.js View on Github external
//       enforce: true,
    //       reuseExistingChunk: true,
    //     }
    //   }
    // },
  }
}

if (isProduction) {
  config.output.filename = '[name].[hash:8].js'
  config.optimization.minimizer = [
    new TerserPlugin({ extractComments: false }),
    new OptimizeCSSAssetsPlugin({})
  ]
  config.plugins.push(
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['app.*.css', 'app.*.js', 'app.*.js.map']
    }),
    new MiniCssExtractPlugin({ filename: '[name].[hash:8].css' }),
    new webpack.IgnorePlugin(/redux-logger/),
    new HtmlWebpackPlugin({
      template: 'public/template.html',
      inject: false,
      filename: 'mainnet.html',
      network: 'mainnet',
      metaMask: true
    }),
    new HtmlWebpackPlugin({
      template: 'public/template.html',
      inject: false,
      filename: 'kovan.html',
      network: 'kovanTst',
github netgen-layouts / layouts-standard / webpack.config.js View on Github external
return (env, argv) => {
    const plugins = [
      new MiniCssExtractPlugin({
        filename: `css/${styleName}.css`,
      }),
      new CleanWebpackPlugin({
        // We cleanup the superfluous js/grid.js since we don't build JavaScript modules for grid.css
        cleanOnceBeforeBuildPatterns: [], // Disables cleanOnceBeforeBuildPatterns since it's specified on its own below
        cleanAfterEveryBuildPatterns: ['js/grid.js'],
      }),
    ];
    if (shouldClean) {
      plugins.push(new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['**/*', '!images', '!dev', '!images/**', '!dev/**'],
      }));
      shouldClean = false;
    }

    const isEnvDevelopment = argv.mode === 'development';
    const isEnvProduction = argv.mode === 'production';

    const resourcesPath = './bundle/Resources';
    const buildPath = isEnvProduction ? 'public' : 'public/dev';

    const getStyleLoaders = (cssOptions, preProcessor) => {
      const loaders = [
        isEnvDevelopment && require.resolve('style-loader'),
        {
          loader: MiniCssExtractPlugin.loader,
github masx200 / webpack-react-vue-spa-awesome-config / config / webpack.config.js View on Github external
Prepack是JavaScript的部分评估程序。Prepack重写了一个JavaScript包,从而使JavaScript代码更有效地执行。对于初始化繁重的代码,Prepack在有效缓存JavaScript解析的环境中工作得最好。
prepack-webpack-plugin
Travis build status Coveralls NPM version Canonical Code Style

A webpack plugin for prepack.
    https://github.com/gajus/prepack-webpack-plugin
    https://prepack.io/
    预包装
一种使JavaScript代码运行得更快的工具。
* Prepack仍处于早期开发阶段,尚未准备好用于生产。请尝试一下,提供反馈,并帮助修复错误。 */
    // new HtmlWebpackPlugin({
    //   title: " Progressive Web Application"
    // }),
    isEnvDevelopment && new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    isEnvProduction && new CleanWebpackPlugin(),
    isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),

    isEnvProduction &&
      new WorkboxWebpackPlugin.GenerateSW({
        clientsClaim: true,
        // exclude: [/\.map$/, /asset-manifest\.json$/],
        importWorkboxFrom: "cdn"
        // navigateFallback: publicUrl + "/index.html",
        // navigateFallbackBlacklist: [
        //   // Exclude URLs starting with /_, as they're likely an API call
        //   new RegExp("^/_"),
        //   // Exclude URLs containing a dot, as they're likely a resource in
        //   // public/ and not a SPA route
        //   new RegExp("/[^/]+\\.[^/]+$")
        // ]
      }),
github catamphetamine / webapp / webpack / production build.js View on Github external
import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin'

import application_configuration from '../code/common/configuration'

const configuration = Object.clone(base_configuration)

configuration.devtool = 'cheap-module-source-map'

configuration.output.filename      = configuration.output.filename.replace('[hash]', '[chunkhash]')
configuration.output.chunkFilename = configuration.output.chunkFilename.replace('[hash]', '[chunkhash]')

configuration.plugins = configuration.plugins.concat
(
	// clears the output folder
	new clean_plugin([path.relative(configuration.context, configuration.output.path)],
	{
		root: configuration.context
	}),

	// environment variables
	new webpack.DefinePlugin
	({
		'process.env':
		{
			// Useful to reduce the size of client-side libraries, e.g. react
			NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
		},

		_client_            : true,
		_server_            : false,
		_development_       : false,
github sensu / sensu-go / dashboard / config / app.webpack.config.js View on Github external
export default makeConfig({
  name: "app",

  entry: {
    app: [path.join(root, "src/app")],
  },

  output: {
    path: path.join(outputPath, "public"),
    publicPath: "/",
    devtoolNamespace: "app",
  },

  plugins: [
    new CleanPlugin(outputPath, { root }),

    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(root, "src/app/static/index.html"),
      minify: process.env.NODE_ENV !== "development" && {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
github catamphetamine / webapp / frontend / webpack / production build.js View on Github external
import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin'

import application_configuration from '../../code/configuration'

const configuration = Object.clone(base_configuration)

configuration.devtool = 'cheap-module-source-map'

configuration.output.filename      = configuration.output.filename.replace('[hash]', '[chunkhash]')
configuration.output.chunkFilename = configuration.output.chunkFilename.replace('[hash]', '[chunkhash]')

configuration.plugins = configuration.plugins.concat
(
	// clears the output folder
	new clean_plugin([path.relative(configuration.context, configuration.output.path)],
	{
		root: configuration.context
	}),

	// environment variables
	new webpack.DefinePlugin
	({
		'process.env':
		{
			// Useful to reduce the size of client-side libraries, e.g. react
			NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
		},

		_development_tools_ : false // `redux-devtools` on/off
	}),
github uiwjs / uiw / script / conf / webpack.config.prod.js View on Github external
uglifyOptions: {
          mangle: {
            safari10: true
          }
        },
        sourceMap: false,
        cache: true,
        parallel: true
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin()
    ]
  },
  plugins: [
    new CleanWebpackPlugin(paths.appBuildDist, {
      root: process.cwd(),
    }),
    new HtmlWebpackPlugin({
      favicon: paths.appFavicon,
      title: 'UIW React, A high quality UI Toolkit, A Component Library for React 16+.',
      inject: true,
      template: paths.appHtml,
      minify: {
        html5: true,
        useShortDoctype: true,
        collapseWhitespace: true,
        conservativeCollapse: true,
        preserveLineBreaks: true,
        removeComments: true,
        keepClosingSlash: true,
        removeRedundantAttributes: true,
github swashata / wp-webpack-script / packages / scripts / src / config / getPlugins.ts View on Github external
export function getPlugins({
	isDev,
	bannerConfig,
}: GetPluginsConfig): webpack.Plugin[] {
	// Figure the NODE_ENV string
	const ENV: string = JSON.stringify(isDev ? 'production' : 'development');
	// Add common plugins
	const plugins: webpack.Plugin[] = [
		// Define env
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': ENV,
			'process.env.BABEL_ENV': ENV,
		}),
		// Clean dist directory
		new cleanWebpackPlugin(['dist']),
		// Initiate mini css extract
		new miniCssExtractPlugin({
			filename: '[name].css',
		}),
	];
	// Add development specific plugins
	if (isDev) {
		plugins.push(
			// Hot Module Replacement
			new webpack.HotModuleReplacementPlugin()
		);
	} else {
		// Add Production specific plugins
		plugins.push(
			// Banner plugin
			new webpack.BannerPlugin({
github isnifer / react-calendar / demo / webpack.config.js View on Github external
const DEV_SERVER_PORT = 3000
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
const PATH_TO_SRC = path.resolve(__dirname, '..', 'src')
const PATH_TO_DIST = path.resolve(__dirname, 'js')
const PATH_TO_DEV_DIST = path.resolve(__dirname, 'public')

const CLEAN_OPTIONS = {
  // Instead of this ugly hack — we will get "wwwroot is outside of the project root. Skipping..."
  root: path.resolve(PATH_TO_DIST, '..'),
  exclude: ['index.html', 'favicon.png'],
  verbose: true,
  dry: false,
}

const productionPlugins = [
  new CleanWebpackPlugin(PATH_TO_DIST, CLEAN_OPTIONS),
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
]

export default {
  mode: 'development',

  entry: path.resolve(PATH_TO_SRC, 'index.js'),

  output: {
    path: !IS_PRODUCTION ? PATH_TO_DEV_DIST : PATH_TO_DIST,
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/',

clean-webpack-plugin

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

MIT
Latest version published 1 year ago

Package Health Score

70 / 100
Full package analysis