webpack--css：消除未使用的CSS(十一)

目录结构

before

after

文件内容

src/css/index.css
增加#aa的样式，但是html中并没有id="aa"

body{
    background-color: red;
    color: white;
}
#image{
    width: 28px;
    height: 28px;
    background-image: url(../images/aaaa.png);
    transform: rotate(30deg);
    box-shadow: 10px 10px 10px;
}
#aa{
    width: 100px;
    height: 100px;
}

webpack.config.js

安装依赖PurifyCSS

使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

cnpm install --save-dev purifycss-webpack purify-css

引入node中的glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

const glob = require('glob');

引入purifycss-webpack

const PurifyCSSPlugin = require('purifycss-webpack');

插件配置

plugins: [
        new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html')),
        })
    ],

打包，运行

npm run build
npm run server

配置前后对比

before

有#aa

after

无#aa

webpack.config.js全部代码

const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
var website = {
    publicPath: "http://192.168.1.9:1717/"
}
module.exports = {
    // 入口 
    entry: {
        entry: './src/entry.js',
    },
    // 出口
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: website.publicPath
    },
    // 模块
    module: {
        //规则
        rules: [
            // {
            //     test: /\.css$/,
            //     use: [
            //         {
            //             loader:'style-loader'
            //         }
            //     ]
            // },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: "css-loader"
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5000,
                        outputPath: 'images/',
                    }
                }]
            }, {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
            // {
            //     test: /\.less$/,
            //     use: [{
            //         loader: 'style-loader'
            //     }, {
            //         loader: 'css-loader'
            //     }, {
            //         loader: 'less-loader'
            //     }]
            // }
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'less-loader'
                    },'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            // {
            //     test: /\.scss$/,
            //     use: [{
            //         loader:'style-loader'
            //     },{
            //         loader:'css-loader'
            //     },{
            //         loader:'sass-loader'
            //     }]
            // },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'sass-loader'
                        },
                        'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            
        ]
    },
    //插件
    plugins: [
        // new uglify()
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/index.css"),
        new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html')),
        })
    ],
    //开发服务
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.1.9',
        compress: true, //服务端是否启用压缩
        port: 1717
    }
}