Skip to content
This repository was archived by the owner on Feb 1, 2020. It is now read-only.

Commit 59a0281

Browse files
committed
Update README.md
1 parent 3b1f42e commit 59a0281

File tree

1 file changed

+5
-207
lines changed

1 file changed

+5
-207
lines changed

README.md

+5-207
Original file line numberDiff line numberDiff line change
@@ -1,211 +1,9 @@
1-
# purgecss-webpack-plugin
1+
# Wepback Plugin Purgecss
22

3-
[![Build Status](https://travis-ci.org/FullHuman/purgecss-webpack-plugin.svg?branch=master)](https://travis-ci.org/FullHuman/purgecss-webpack-plugin)
4-
[![CircleCi](https://circleci.com/gh/FullHuman/purgecss-webpack-plugin/tree/master.svg?style=shield)]()
5-
[![dependencies Status](https://david-dm.org/fullhuman/purgecss-webpack-plugin/status.svg)](https://david-dm.org/fullhuman/purgecss-webpack-plugin)
6-
[![devDependencies Status](https://david-dm.org/fullhuman/purgecss-webpack-plugin/dev-status.svg)](https://david-dm.org/fullhuman/purgecss-webpack-plugin?type=dev)
7-
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/c23bd13d30104a7a89bed239166aaf69)](https://www.codacy.com/app/FullHuman/purgecss-webpack-plugin?utm_source=github.com&utm_medium=referral&utm_content=FullHuman/purgecss-webpack-plugin&utm_campaign=Badge_Grade)
8-
[![Codacy Badge](https://api.codacy.com/project/badge/Coverage/c23bd13d30104a7a89bed239166aaf69)](https://www.codacy.com/app/FullHuman/purgecss-webpack-plugin?utm_source=github.com&utm_medium=referral&utm_content=FullHuman/purgecss-webpack-plugin&utm_campaign=Badge_Coverage)
9-
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
10-
[![npm](https://img.shields.io/npm/v/purgecss-webpack-plugin.svg)](https://www.npmjs.com/package/purgecss-webpack-plugin)
11-
[![license](https://img.shields.io/github/license/fullhuman/purgecss-webpack-plugin.svg)]() [![Greenkeeper badge](https://badges.greenkeeper.io/FullHuman/purgecss-webpack-plugin.svg)](https://greenkeeper.io/)
3+
The contents of this repository were moved into the
4+
[PurgeCSS](https://github.com/FullHuman/purgecss) repository. The source code can be
5+
found in [packages/purgecss-webpack-plugin](https://github.com/FullHuman/purgecss/tree/master/packages/purgecss-webpack-plugin).
126

13-
[Webpack](https://github.com/webpack/webpack) plugin to remove unused css.
14-
15-
## Install
16-
```sh
17-
npm i purgecss-webpack-plugin -D
187
```
19-
20-
## Usage
21-
22-
### With mini-css-extract-plugin
23-
24-
```js
25-
const path = require('path')
26-
const glob = require('glob')
27-
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
28-
const PurgecssPlugin = require('purgecss-webpack-plugin')
29-
30-
const PATHS = {
31-
src: path.join(__dirname, 'src')
32-
}
33-
34-
module.exports = {
35-
entry: './src/index.js',
36-
output: {
37-
filename: 'bundle.js',
38-
path: path.join(__dirname, 'dist')
39-
},
40-
optimization: {
41-
splitChunks: {
42-
cacheGroups: {
43-
styles: {
44-
name: 'styles',
45-
test: /\.css$/,
46-
chunks: 'all',
47-
enforce: true
48-
}
49-
}
50-
}
51-
},
52-
module: {
53-
rules: [
54-
{
55-
test: /\.css$/,
56-
use: [
57-
MiniCssExtractPlugin.loader,
58-
"css-loader"
59-
]
60-
}
61-
]
62-
},
63-
plugins: [
64-
new MiniCssExtractPlugin({
65-
filename: "[name].css",
66-
}),
67-
new PurgecssPlugin({
68-
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
69-
}),
70-
]
71-
}
72-
```
73-
### Multiple paths
74-
If you need multiple paths use the npm package `glob-all` instead of `glob`, then you can use this syntax:
75-
```javascript
76-
new PurgecssPlugin({
77-
paths: glob.sync([
78-
// ...
79-
])
80-
}),
81-
```
82-
to filter out directories see the glob-all documentation [here](https://www.npmjs.com/package/glob-all#filtering-out-directories).
83-
84-
### Webpack 3 (with extract-text-webpack-plugin)
85-
```js
86-
const path = require('path')
87-
const glob = require('glob')
88-
const ExtractTextPlugin = require('extract-text-webpack-plugin')
89-
const PurgecssPlugin = require('purgecss-webpack-plugin')
90-
91-
const PATHS = {
92-
src: path.join(__dirname, 'src')
93-
}
94-
95-
module.exports = {
96-
entry: './src/index.js',
97-
output: {
98-
filename: 'bundle.js',
99-
path: path.join(__dirname, 'dist')
100-
},
101-
module: {
102-
rules: [
103-
{
104-
test: /\.css$/,
105-
use: ExtractTextPlugin.extract({
106-
fallback: 'style-loader',
107-
use: 'css-loader?sourceMap'
108-
})
109-
}
110-
]
111-
},
112-
plugins: [
113-
new ExtractTextPlugin('[name].css?[hash]'),
114-
new PurgecssPlugin({
115-
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
116-
})
117-
]
118-
}
8+
npm i -D purgecss-webpack-plugin
1199
```
120-
121-
### Options
122-
123-
The options available in purgecss [Configuration](https://www.purgecss.com/configuration.html) are also available in the webpack plugin with the exception of css and content.
124-
125-
* #### paths
126-
127-
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.
128-
129-
```js
130-
const PurgecssPlugin = require('purgecss-webpack-plugin')
131-
const glob = require('glob')
132-
const PATHS = {
133-
src: path.join(__dirname, 'src')
134-
}
135-
136-
// In the webpack configuration
137-
new PurgecssPlugin({
138-
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
139-
})
140-
```
141-
142-
If you want to regenerate the paths list on every compilation (e.g. with `--watch`), then you can also pass a function:
143-
```js
144-
new PurgecssPlugin({
145-
paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true })
146-
})
147-
```
148-
149-
* #### only
150-
151-
You can specify entrypoints to the purgecss-webpack-plugin with the option only:
152-
153-
```js
154-
new PurgecssPlugin({
155-
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
156-
only: ['bundle', 'vendor']
157-
})
158-
```
159-
160-
* #### whitelist, whitelistPatterns and whitelistPatternsChildren
161-
162-
Similar as for the `paths` option, you also can define functions for the these options:
163-
164-
```js
165-
function collectWhitelist() {
166-
// do something to collect the whitelist
167-
return ['whitelisted'];
168-
}
169-
function collectWhitelistPatterns() {
170-
// do something to collect the whitelist
171-
return [/^whitelisted-/];
172-
}
173-
174-
function collectWhitelistPatternsChildren() {
175-
// do something to collect the whitelist
176-
return [/^whitelisted-/];
177-
}
178-
179-
// In the webpack configuration
180-
new PurgecssPlugin({
181-
whitelist: collectWhitelist,
182-
whitelistPatterns: collectWhitelistPatterns,
183-
whitelistPatternsChildren: collectWhitelistPatternsChildren
184-
})
185-
```
186-
187-
* #### rejected
188-
189-
If `true` all removed selectors are added to the [Stats Data](https://webpack.js.org/api/stats/) as `purged`.
190-
191-
## Contributing
192-
193-
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
194-
195-
## Versioning
196-
197-
We use [SemVer](http://semver.org/) for versioning.
198-
199-
## Acknowledgment
200-
201-
Purgecss was originally thought as the v2 of purifycss. And because of it, it is greatly inspired by it.
202-
The plugins such as purgecss-webpack-plugin are based on the purifycss plugin.
203-
Below is the list of the purifycss repositories:
204-
205-
* [purifycss](https://github.com/purifycss/purifycss)
206-
* [gulp-purifycss](https://github.com/purifycss/gulp-purifycss)
207-
* [purifycss-webpack](https://github.com/webpack-contrib/purifycss-webpack)
208-
209-
## License
210-
211-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

0 commit comments

Comments
 (0)