如何解决webpack PurgeCSS webpack插件无法正常工作
我要在使用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";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。