【亲测免费】 Extract-Text-Webpack-Plugin 使用教程

1. 项目的目录结构及介绍

extract-text-webpack-plugin/
├── lib/
│   ├── index.js
│   ├── loader.js
│   ├── plugin.js
│   └── util.js
├── test/
│   ├── index.js
│   ├── loader.js
│   ├── plugin.js
│   └── util.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

• lib/：包含插件的主要逻辑文件。
  • index.js：插件的入口文件。
  • loader.js：自定义的加载器。
  • plugin.js：插件的核心实现。
  • util.js：工具函数。
• test/：包含插件的测试文件。
• .babelrc：Babel 配置文件。
• .editorconfig：编辑器配置文件。
• .eslintrc：ESLint 配置文件。
• .gitignore：Git 忽略文件配置。
• .npmignore：NPM 忽略文件配置。
• .travis.yml：Travis CI 配置文件。
• CHANGELOG.md：更新日志。
• LICENSE：许可证文件。
• README.md：项目说明文档。
• package.json：项目依赖和脚本配置。
• yarn.lock：Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 lib/index.js，这是插件的入口文件。它导出了插件的主要功能，并处理了插件的初始化逻辑。

// lib/index.js
module.exports = require('./plugin');

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，它包含了项目的依赖、脚本和其他元数据。

{
  "name": "extract-text-webpack-plugin",
  "version": "4.0.0-beta.0",
  "description": "Extract text from bundle into a file.",
  "main": "lib/index.js",
  "scripts": {
    "test": "jest",
    "build": "babel src --out-dir lib",
    "prepublish": "npm run build"
  },
  "dependencies": {
    "loader-utils": "^1.1.0",
    "schema-utils": "^0.4.5"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "eslint": "^4.19.1",
    "jest": "^22.4.3",
    "webpack": "^4.0.0"
  },
  "peerDependencies": {
    "webpack": "^4.0.0"
  },
  "engines": {
    "node": ">=6.9.0"
  },
  "license": "MIT"
}

• name：项目名称。
• version：项目版本。
• description：项目描述。
• main：入口文件路径。
• scripts：自定义脚本命令。
• dependencies：生产环境依赖。
• devDependencies：开发环境依赖。
• peerDependencies：对等依赖。
• engines：支持的 Node.js 版本。
• license：许可证类型。