我要在使用webpack和purgecss-webpack-plugin的设置中从Clarity UI CSS文件中清除未使用的CSS。
但是,尽管CSS文件的大小从565kB减小到172kB,但由于我不使用任何文件,因此应将其减小到0kB。如果我使用Bootstrap做同样的事情,文件大小将减小到1kB。
为什么会这样,并且有解决办法?
我的文件夹结构如下:
|-dist
|
|-node_modules
|
|-src
|--index.js
|
|.babelrc
|package.json
|webpack.config.js
我的package.json:
{
"name": "webpack-clarity",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "node ./index.js",
"build": "webpack"
},
"dependencies": {
"@clr/ui": "^4.0.0",
"bootstrap": "^4.5.2"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"glob": "^7.1.6",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"purgecss-webpack-plugin": "^2.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].css" }),
new PurgeCSSPlugin({
paths: glob.sync("./src/**/*.js", { nodir: true }),
}),
],
};
.babelrc
{
"presets": [
[
"@babel/preset-env",
{"modules": false}
]
]
}
index.js
import "../node_modules/@clr/ui/clr-ui.min.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";