前提说明

去除无用样式就是去除样式中没有用到的 CSS 样式，这样有助于代码的优化，减少不必要样式代码的加载。

去除无用样式需要用到的模块：

• purify-css
• purifycss-webpack
• glob，这个是一个辅助模块，用来获取 paths 的

准备工作

首先，还是把需要的依赖安装一下 package.json：

  "scripts": {"webpack": "webpack"},"devDependencies": {"css-loader": "^1.0.0","glob": "^7.1.3","mini-css-extract-plugin": "^0.4.2","purify-css": "^1.2.5","purifycss-webpack": "^0.7.0","webpack": "^4.17.1","webpack-cli": "^3.1.0"}

其次，就是准备 Webpack 的配置文件 webpack.config.js，当然，这个配置文件是一部分：

const { join, relative } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");const config = {};config.mode = 'production';
config.entry = {index: join(__dirname, './src/index.js')
};
config.output = {path: join(__dirname, './dist'),filename: '[name].bundle.js',chunkFilename: '[name].chunk.js',publicPath: join(__dirname, './dist/')
};config.module = {rules: []
};config.module.rules.push({test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader},{loader: 'css-loader'}]
});config.plugins = [];config.plugins.push(new MiniCssExtractPlugin({filename: "[name].css"
}));module.exports = config;

最后，就是准备一下需要的代码文件：

index.js：

import './css/common.css';function createDiv() {var element = document.createElement('div');element.className = 'my-div';element.innerHTML = '这是一个div';return element;
}document.body.appendChild(createDiv());

css/common.css：

* {margin: 0;padding: 0;
}.my-div {width: 100%;height: 120px;background-color: aqua;
}span {font-size: 16px;
}

增加相关配置

其中 glob 模块是用来读取文件的。

const PurifyCSSPlugin = require("purifycss-webpack");
const glob = require('glob');config.plugins.push(new PurifyCSSPlugin({paths: glob.sync(join(__dirname, './src/**/*.js'))
}));

最后执行命令 yarn webpack，在 dist 目录下就会生成一个 index.css 文件。

* {margin: 0;padding: 0;
}.my-div {width: 100%;height: 120px;background-color: aqua;
}

会发现样式中没有了 span 的样式，因为这个样式没有被用到。