filter-chunk-webpack-plugin

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
filter-chunk-webpack-plugin
8202.1.06 years ago7 years agoMinified + gzip package size for filter-chunk-webpack-plugin in KB

Readme

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

!npmnpm-badgenpm-link !Build Statuscircle-badgecircle-link !Coverage Statuscodecov-badgecodecov-link !PRs Welcomepr-welcome-badgepr-welcome-link
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 multimatchmultimatch-package | | 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