filter-chunk-webpack-plugin

filter-chunk-webpack-plugin

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

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: 'assets/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

assets/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