filter-chunk-webpack-plugin v2.1.0

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

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

License

filter-chunk-webpack-plugin is MIT licensed