Webpack plugin to remove unused css.
npm i purgecss-webpack-plugin -D
const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const PATHS = {
src: path.join(__dirname, 'src')
}
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
}),
]
}
If you need multiple paths use the npm package glob-all
instead of glob
, then you can use this syntax:
new PurgecssPlugin({
paths: glob.sync([
// ...
])
}),
to filter out directories see the glob-all documentation here.
const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const PATHS = {
src: path.join(__dirname, 'src')
}
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?sourceMap'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css?[hash]'),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
]
}
The options available in purgecss Configuration are also available in the webpack plugin with the exception of css and content.
With the webpack plugin, you can specified the content that should be analyzed by purgecss with an array of filename. It can be html, pug, blade, ... files. You can 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}/**/*`, { nodir: true })
})
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}/**/*`, { nodir: true })
})
You can specify entrypoints to the purgecss-webpack-plugin with the option only:
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
only: ['bundle', 'vendor']
})
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-/];
}
function collectWhitelistPatternsChildren() {
// do something to collect the whitelist
return [/^whitelisted-/];
}
// In the webpack configuration
new PurgecssPlugin({
whitelist: collectWhitelist,
whitelistPatterns: collectWhitelistPatterns,
whitelistPatternsChildren: collectWhitelistPatternsChildren
})
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning.
Purgecss was originally thought as the v2 of purifycss. And because of it, it is greatly inspired by it. The plugins such as purgecss-webpack-plugin are based on the purifycss plugin. Below is the list of the purifycss repositories:
This project is licensed under the MIT License - see the LICENSE file for details