HTML Webpack Harddisk Plugin 使用教程

HTML Webpack Harddisk Plugin 使用教程

html-webpack-harddisk-pluginWrite html files to hard disk even when using the webpack dev server or middleware项目地址:https://gitcode.com/gh_mirrors/ht/html-webpack-harddisk-plugin

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

HTML Webpack Harddisk Plugin 项目的目录结构如下：

html-webpack-harddisk-plugin/
├── lib/
│   ├── index.js
│   └── index.d.ts
├── src/
│   └── index.js
├── test/
│   └── index.test.js
├── .babelrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• lib/：编译后的文件，包含主要的插件代码和类型定义。
• src/：源代码文件，包含插件的主要逻辑。
• test/：测试文件，包含插件的单元测试。
• .babelrc：Babel 配置文件，用于转译 JavaScript 代码。
• .gitignore：Git 忽略文件列表。
• .npmignore：NPM 忽略文件列表。
• .travis.yml：Travis CI 配置文件。
• LICENSE：项目许可证。
• package.json：项目的依赖和脚本配置。
• README.md：项目说明文档。
• webpack.config.js：示例 Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js，这是插件的主要入口点。该文件导出了一个类 HtmlWebpackHarddiskPlugin，该类继承自 HtmlWebpackPlugin 并添加了额外的功能。

// src/index.js
import path from 'path';
import fs from 'fs';
import { ConcatSource } from 'webpack-sources';

class HtmlWebpackHarddiskPlugin {
  apply(compiler) {
    // 插件逻辑
  }
}

module.exports = HtmlWebpackHarddiskPlugin;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "html-webpack-harddisk-plugin",
  "version": "1.0.0",
  "description": "Offers you the ability to render your HTML template with HTMLWebpackPlugin to a hard disk",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src --out-dir lib",
    "test": "jest"
  },
  "dependencies": {
    "webpack": "^5.0.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "jest": "^26.6.3"
  }
}

webpack.config.js

webpack.config.js 文件是一个示例配置文件，展示了如何使用 HtmlWebpackHarddiskPlugin 插件。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('./src/index');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      alwaysWriteToDisk: true
    }),
    new HtmlWebpackHarddiskPlugin()
  ]
};

通过以上配置，你可以将生成的 HTML 文件写入硬盘，即使是在开发模式下。

html-webpack-harddisk-pluginWrite html files to hard disk even when using the webpack dev server or middleware项目地址:https://gitcode.com/gh_mirrors/ht/html-webpack-harddisk-plugin