CSS Minimizer Webpack Plugin 使用教程
1. 项目的目录结构及介绍
css-minimizer-webpack-plugin/
├── LICENSE
├── README.md
├── dist/
│ ├── cjs.js
│ ├── cjs.js.map
│ ├── esm.js
│ └── esm.js.map
├── lib/
│ ├── index.js
│ ├── minify.js
│ ├── options.js
│ ├── utils.js
│ └── webpack.js
├── package.json
└── test/
├── fixtures/
├── helpers/
├── index.js
├── minify.js
├── options.js
├── utils.js
└── webpack.js
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- dist/: 包含编译后的 CommonJS 和 ES Module 格式的文件。
- lib/: 项目的源代码目录,包含主要的逻辑文件。
- package.json: 项目的依赖和配置文件。
- test/: 项目的测试目录,包含各种测试用例和辅助文件。
2. 项目的启动文件介绍
项目的启动文件位于 lib/index.js
,这是插件的入口文件。它导入了插件的主要功能并将其暴露给 Webpack 使用。
// lib/index.js
const CssMinimizerPlugin = require('./webpack').default;
module.exports = CssMinimizerPlugin;
3. 项目的配置文件介绍
项目的配置文件主要是 package.json
,它包含了项目的依赖、脚本和其他元数据。
{
"name": "css-minimizer-webpack-plugin",
"version": "3.4.1",
"description": "css minimizer plugin for webpack",
"main": "dist/cjs.js",
"module": "dist/esm.js",
"types": "dist/cjs.d.ts",
"scripts": {
"test": "jest",
"build": "rollup -c",
"prepublishOnly": "yarn run build"
},
"files": [
"dist",
"lib"
],
"dependencies": {
"cssnano": "^5.0.6",
"jest": "^27.0.6",
"rollup": "^2.52.2",
"webpack": "^5.38.1"
},
"peerDependencies": {
"webpack": "^5.0.0"
}
}
- name: 项目的名称。
- version: 项目的版本号。
- description: 项目的描述。
- main: 项目的入口文件。
- module: ES Module 格式的入口文件。
- types: TypeScript 类型定义文件。
- scripts: 项目的脚本命令。
- files: 发布时包含的文件和目录。
- dependencies: 项目的依赖包。
- peerDependencies: 项目的对等依赖包。