开源项目 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 <mike.evans@numical.com>",
"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",