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.
Install the library via:
npm install filter-chunk-webpack-plugin --save-dev
Webpack | Package Version |
---|---|
4.x.x | > 2.x.x |
3.x.x | 1.x.x |
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 | 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 |
filter-chunk-webpack-plugin
is MIT licensed