【亲测免费】 开源项目 `script-ext-html-webpack-plugin` 使用教程

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

script-ext-html-webpack-plugin/
├── LICENSE
├── README.md
├── lib
│   ├── index.js
│   └── options.js
├── package.json
└── test
    ├── index.js
    └── test-cases
        ├── async-scripts
        │   ├── index.js
        │   └── template.html
        ├── defer-async-scripts
        │   ├── index.js
        │   └── template.html
        ├── defer-scripts
        │   ├── index.js
        │   └── template.html
        ├── inline-async-scripts
        │   ├── index.js
        │   └── template.html
        ├── inline-defer-scripts
        │   ├── index.js
        │   └── template.html
        ├── inline-scripts
        │   ├── index.js
        │   └── template.html
        ├── no-scripts
        │   ├── index.js
        │   └── template.html
        ├── preload-scripts
        │   ├── index.js
        │   └── template.html
        └── sync-scripts
            ├── index.js
            └── template.html

目录结构介绍

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• lib: 包含项目的主要代码文件。
  • index.js: 插件的主入口文件。
  • options.js: 插件的配置选项处理文件。
• package.json: 项目的依赖管理文件。
• test: 包含项目的测试文件。
  • index.js: 测试的主入口文件。
  • test-cases: 包含各种测试用例。
    • async-scripts, defer-async-scripts, defer-scripts, inline-async-scripts, inline-defer-scripts, inline-scripts, no-scripts, preload-scripts, sync-scripts: 不同场景的测试用例。
    • index.js: 每个测试用例的入口文件。
    • template.html: 每个测试用例的模板文件。

2. 项目的启动文件介绍

项目的启动文件位于 lib/index.js。这个文件是插件的主入口，负责初始化和应用插件的主要逻辑。

主要功能

• 初始化插件实例。
• 处理配置选项。
• 在 Webpack 构建过程中注入脚本标签。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 lib/options.js。

package.json

package.json 文件包含了项目的元数据和依赖信息。

{
  "name": "script-ext-html-webpack-plugin",
  "version": "2.1.5",
  "description": "Enhances html-webpack-plugin functionality with async, defer, type='module', preload, prefetch and custom attributes for your script tags.",
  "main": "lib/index.js",
  "scripts": {
    "test": "mocha --recursive"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/numical/script-ext-html-webpack-plugin.git"
  },
  "keywords": [
    "webpack",
    "plugin",
    "html-webpack-plugin",
    "async",
    "defer",
    "module",
    "preload",
    "prefetch"
  ],
  "author": "Mike Evans <[e-mail]>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/numical/script-ext-html-webpack-plugin/issues"
  },
  "homepage": "https://github.com/numical/script-ext-html-webpack-plugin#readme",
  "dependencies": {
    "html-webpack-plugin": "^4.0.0-beta.5",
    "lodash.merge": "^4.6.2"
  },
  "devDependencies": {
    "chai": "^4.2.0",
    "mocha": "^6.1.4",