找出html中未使用的css,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

}

}