How to use webpackbar - 10 common examples

const buildPath = join(root, buildDir);

  const { BannerPlugin } = webpack;

  const {
    minCss = !0,
    filename = '',
    library = 'Index',
    banner = '',
    externals,
  } = config;

  const baseConfig = base(lila, webpack, { entry, cmd, config });

  baseConfig.plugins.push(
    new WebpackBar(),
    new SpeedMeasurePlugin(),
    // css standalone
    new MiniCssExtractPlugin({
      filename: `${filename || 'style'}.css`,
    })
  );

  if (minCss)
    baseConfig.plugins.push(
      new OptimizeCssAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
      })
    );

getPlugins() {
    // TODO inject DLLs `
    // TODO https://github.com/diurnalist/chunk-manifest-webpack-plugin
    const plugins = [
      new WebpackBar(),
      // remove outdated assets from previous builds.
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin(this.getDefinedVars()),
      new CopyWebpackPlugin([{
        from: frameworkConfig.directories.resources,
        to: './',
        toType: 'dir',
      }]),

      // Inject webpack bundle into HTML.
      new HtmlWebpackPlugin({
        inject: true,
        templateContent: buildIndexPage(),

        // FIXME temporary hack for webpack 4 https://github.com/jantimon/html-webpack-plugin/issues/870
        chunksSortMode: 'none',

plugins: [
                                    require("autoprefixer")({}),
                                    require(resolve(pwd, "../../common/postcss-plugin-clean"))({})
                                ]
                            }
                        },
                        "sass-loader"
                    ]
                }
            ]
        },
        resolve: {
            extensions: [".js", ".jsx", ".ts", ".tsx"]
        },
        plugins: [
            new WebpackBar(
                webpackBarOptions({
                    name: slug
                })
            ),
            new ForkTsCheckerWebpackPlugin(),
            new DefinePlugin({
                // NODE_ENV is used inside React to enable/disable features that should only be used in development
                "process.env": definePlugin({
                    NODE_ENV: JSON.stringify(NODE_ENV),
                    env: JSON.stringify(NODE_ENV),
                    rootSlug: JSON.stringify(rootPkg.name),
                    slug: JSON.stringify(slug)
                })
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css"

export default (lila, webpack, { entry, cmd, config }) => {
  const { getSettings } = lila;
  const [root, srcDir, buildDir] = getSettings(['root', 'src', 'build']);
  const srcPath = join(root, srcDir);
  const buildPath = join(root, buildDir);

  const {
    staticServer = '',
    minCss = !0,
    splitChunks = defaultSplitChunks,
  } = config;

  const baseConfig = base(lila, webpack, { entry, cmd, config });

  baseConfig.plugins.push(
    new WebpackBar(),
    new SpeedMeasurePlugin(),
    // css standalone
    new MiniCssExtractPlugin({
      filename: '[chunkhash].css',
    })
  );

  baseConfig.optimization.splitChunks = splitChunks;

  if (minCss)
    baseConfig.plugins.push(
      new OptimizeCssAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
      })

// CSS extraction)
    if (buildOptions.extractCSS) {
      plugins.push(new ExtractCssChunksPlugin(Object.assign({
        filename: this.getFileName('css'),
        chunkFilename: this.getFileName('css')
      }, buildOptions.extractCSS)))
    }

    plugins.push(new VueLoader.VueLoaderPlugin())

    plugins.push(...(buildOptions.plugins || []))

    plugins.push(new WarningIgnorePlugin(this.warningIgnoreFilter()))

    // Build progress indicator
    plugins.push(new WebpackBar({
      name: this.name,
      color: this.colors[this.name],
      reporters: [
        'basic',
        'fancy',
        'profile',
        'stats'
      ],
      basic: !buildOptions.quiet && env.minimalCLI,
      fancy: !buildOptions.quiet && !env.minimalCLI,
      profile: !buildOptions.quiet && buildOptions.profile,
      stats: !buildOptions.quiet && !this.dev && buildOptions.stats,
      reporter: {
        change: (_, { shortPath }) => {
          if (!this.isServer) {
            nuxt.callHook('bundler:change', shortPath)

{
          test: /\.(js|jsx|ts|tsx)$/,
          include: [dir],
          exclude: /node_modules/,
          use: defaultLoaders.babel
        }
      ].filter(Boolean)
    },
    plugins: [
      dev && !isServer && new HardSourceWebpackPlugin({}),
      // This plugin makes sure `output.filename` is used for entry chunks
      new ChunkNamesPlugin({ dev }),
      !isServer && new ReactLoadablePlugin({
        filename: REACT_LOADABLE_MANIFEST
      }),
      new WebpackBar({
        name: isServer ? 'server' : 'client'
      }),
      dev && !isServer && new FriendlyErrorsWebpackPlugin(),
      new webpack.IgnorePlugin(/(precomputed)/, /node_modules.+(elliptic)/),
      // Even though require.cache is server only we have to clear assets from both compilations
      // This is because the client compilation generates the build manifest that's used on the server side
      dev && new JoyRequireCacheHotReloader(),
      dev && !isServer && new webpack.HotModuleReplacementPlugin({ multiStep: true }),
      dev && new webpack.NoEmitOnErrorsPlugin(),
      dev && new UnlinkFilePlugin(),
      dev && new CaseSensitivePathPlugin(), // Since on macOS the filesystem is case-insensitive this will make sure your path are case-sensitive
      dev && new WriteFilePlugin({
        exitOnErrors: false,
        log: false,
        // required not to cache removed files
        useHashIndex: false

require.cache[require.resolve(webpackConfigPath)].exports = (env: string) => {
    const config: Configuration = webpackConfig(env)

    if (config.plugins) {
      config.plugins.push(new WebpackBar())
    }

    let newConfig = override(config, env).pipe(
      overrideWebpackExclude(),
      alias({
        '@utils': resolve('utils/'),
        '@common': resolve('common/'),
        '@config': resolve('config/'),
        '@services': resolve('services/'),
        '@stores': resolve('stores/'),
        '@components': resolve('components/'),
        '@layouts': resolve('layouts/'),
        '@pages': resolve('pages/'),
        '@modals': resolve('modals/'),
        '@drawers': resolve('drawers/'),
        '@hooks': resolve('hooks/'),

export default (lila, webpack, { entry, cmd, config }) => {
  const { getSettings } = lila;
  const [root, srcDir, tmpDir, analyzeDir = 'analyze'] = getSettings([
    'root',
    'src',
    'tmp',
    'analyze',
  ]);
  const srcPath = join(root, srcDir);
  const analyzePath = join(root, tmpDir, analyzeDir);

  const baseConfig = base(lila, webpack, { entry, cmd, config });

  baseConfig.plugins.push(new WebpackBar(), new SpeedMeasurePlugin());

  return {
    entry: `${srcPath}/${entry === defaultEntry ? '' : `${entry}/`}index.js`,
    output: {
      path: analyzePath,
      filename: 'index.js',
    },
    ...baseConfig,
  };
};

},
    };

    if (options.mode === BuildMode.PRODUCTION) {
        config.plugins.push(
            new MiniCssExtractPlugin({
                filename: "[name].min.css?[chunkhash]",
            }),
        );
    }

    if (options.fix) {
        config.plugins.unshift(getPrettierPlugin());
    }
    config.plugins.push(
        new WebpackBar({
            name: section,
        }),
    );

    return config;
}