视频里所说的css tree-shaking在实际实践中，虽然和视频的不一样，但是大体思想一致，老师帮忙看下为啥没有生效？

来源：3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking

慕运维5828042

2018-02-23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<div class="a">dsajdajk</div>
<script src="./dist/app.bundle.js"></script>
</body>
</html>

import './css/app.css'
import { a } from '../util';
a()
import {chunk} from 'lodash'

console.log(chunk(['a', 'b', 'c', 'd'], 3))
let Dom = document.getElementById('app')
let div = document.createElement('div');
div.className = "b";
Dom.appendChild(div)

.a{
font-size:16px;
}
.b{
font-size:18px;
}
.c{
font-size:20px;
}
.c1{
font-size:20px;
}
.c2{
font-size:20px;
}
.c3{
font-size:20px;
}
.c4{
font-size:20px;
}

配置文件

const webpack = require('webpack');
const CleanWepackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const PurifyCss = require('purifycss-webpack');
const glob = require('glob-all');
const path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js'
},
module:{
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: 'env',
plugins: ['lodash']
}
}]
},
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin({
filename: '[name].min.css'
}),
new PurifyCss({
paths: glob.sync([
path.join(__dirname,'./*.html'),
path.join(__dirname,'./src/*.js')
])
}),
new webpack.optimize.UglifyJsPlugin(),
new CleanWepackPlugin('./dist'),
]
}