The options available in the PurgeCSS configuration are also available in the Webpack plugin (except css and content).
paths
With the Webpack plugin, you can specify content that should be analyzed by PurgeCSS with an array of filenames. The files can be HTML, Pug, Blade, etc. You can also use a module like glob or glob-all to easily get a list of files.
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob')
const PATHS = {
src: path.join(__dirname, 'src')
}
// In the webpack configuration
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/*`)
})
If you want to regenerate the paths list on every compilation (e.g. with --watch), then you can also pass a function:
new PurgecssPlugin({
paths: () => glob.sync(`${PATHS.src}/*`)
})
only
You can specify entrypoints to the purgecss-webpack-plugin with the option only:
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/*`),
only: ['bundle', 'vendor']
})
whitelist and whitelistPatterns
Similar as for the paths option, you also can define functions for the these options:
function collectWhitelist() {
// do something to collect the whitelist
return ['whitelisted'];
}
function collectWhitelistPatterns() {
// do something to collect the whitelist
return [/^whitelisted-/];
}
// In the Webpack configuration
new PurgecssPlugin({
whitelist: collectWhitelist,
whitelistPatterns: collectWhitelistPatterns
})