去除多余css purifycss

PurifyCSS
去除多余的css。

// Installation
npm i -D purify-css

import purifycss from "purify-css"
const purifycss = require("purify-css")

let content = "<button class="button-active"> Login </button>"
let css = ".button-active { color: green; }   .unused-class { display: block; }"
let options = {
    output: "filepath/output.css"
}
purify(content, css, options)

// output
.button-active { color: green; }

purify-webpack
依赖于purifycss，Configure as follows:

const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
  entry: {...},
  output: {...},
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]
};

In order to use this plugin to look into multiple paths you will need to:

npm install --save glob-all
const glob = require('glob-all');

paths: glob.sync([
  path.join(__dirname, '.php'),
  path.join(__dirname, 'partials/.php')
])

参考：
https://github.com/purifycss/purifycss
https://github.com/webpack-contrib/purifycss-webpack