Skip to content

yeojz/filter-chunk-webpack-plugin

Repository files navigation

filter-chunk-webpack-plugin

Include or exclude files / chunks from the final webpack output based on a list of patterns

npm Build Status Coverage Status PRs Welcome

This webpack plugin allows you to filter the list of output files before they are being written / emitted to disk. It does not prevent files from import or require from being processed and bundled, keeping the file references like image assets in your bundled code.

This is useful if you're creating multiple output bundles with common assets. As such, you can use this to omit it in other runs.

Installation

Install the library via:

npm install filter-chunk-webpack-plugin --save-dev

Tested Versions

Webpack Package Version
4.x.x > 2.x.x
3.x.x 1.x.x

Basic Usage

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FilterChunkWebpackPlugin = require('filter-chunk-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.[chunkhash].js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader"
      ]
    }, {
      test: /\.svg$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[hash].[ext]',
          outputPath: 'assets/images/'
        }
      }
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "assets/css/[contenthash].css",
      chunkFilename: "assets/css/[id].css"
    })
    new FilterChunkWebpackPlugin({
      patterns: [
        'assets/*',
        '!assets/css/*'
      ]
    })
  ]
};

This should generate files like

app.12ab3c.js
assets/css/css.98a5a.css

but not

assets/images/a5b912cd3.svg

For more information, check out the usage.spec.js.

Options

options type default description
patterns array [] A list of pattern types that are supported by multimatch
select boolean false By default, this plugin will omit the matched result. Setting this to true will include the matched result instead of omitting them

License

filter-chunk-webpack-plugin is MIT licensed

About

🚦 Include or exclude files / chunks from the final webpack output based on a list of patterns

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published