在前端开发中，webpack 是一个非常流行的构建工具，而 @beisen/html-webpack-harddisk-plugin 这个 npm 包则是可以让 webpack 插件在写入 HTML 文件时候，将文件写入硬盘的插件。
本篇文章将详细介绍 @beisen/html-webpack-harddisk-plugin 的使用，包括安装、配置方法和示例代码，并会为初学者提供一些指导意义和深度学习的知识。
安装
使用 npm 安装即可：
npm install --save-dev @beisen/html-webpack-harddisk-plugin
配置
配置方法也十分简单，只需在 webpack 配置文件中加入如下代码：
-- -------------------- ---- -------
----- ------------------------- - ------------------------------------------------
-------------- - -
-- ------- -------
-------- -
--- -------------------
------------------ ----
---
--- ---------------------------
----------- ------------------------
--
-- -------- -------
-
-配置中的 alwaysWriteToDisk: true 是为了防止 webpack 开发时在内存中生成的 HTML 文件丢失，而 outputPath 则是用于设定 HTML 文件硬盘生成的位置。
示例
下面提供一个简单示例，假设我们有一个 webpack 项目，并且有一个 index.html 文件，我们需要在构建时将其写入硬盘。
首先，让我们创建一个项目，初始化一个 package.json 文件，并安装 webpack 和 @beisen/html-webpack-harddisk-plugin：
mkdir myproject cd myproject npm init -y npm install --save-dev webpack @beisen/html-webpack-harddisk-plugin
接下来，我们在根目录创建一个 index.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------
-------
------
---------- -----------
------- -------------------------
-------
-------然后创建一个 webpack 配置文件 webpack.config.js：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------------- - ------------------------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------
------------------ -----
--------- ------------
---
--- ---------------------------
----------- --------- - -------
--
-
--这里的 entry 指定入口文件，output 指定输出文件名和路径，而 plugins 中分别为 HtmlWebpackPlugin 和 HtmlWebpackHarddiskPlugin，其中 alwaysWriteToDisk 保证了 HTML 文件在开发时生成失败后，可以从硬盘中获取，outputPath 则是为了指定 HTML 文件生成到 dist 文件夹。
最后，我们创建一个 index.js 文件，使其写入一些内容到页面中：
const root = document.createElement('div');
root.innerHTML = 'This is my project!';
document.body.appendChild(root);现在执行以下命令即可构建：
npx webpack
构建完成后，在根目录的 dist/index.html 中可以看到生成的 HTML 文件。
指导意义
本文简要介绍了 @beisen/html-webpack-harddisk-plugin 的使用，希望读者通过本文能够更了解 webpack 插件的使用和流程，并在实际项目中更好地使用该插件，提高开发效率。
同时，对于初学者而言，本文也提供了一些指导意义和深度学习的知识，希望能帮助读者更快速地入门 webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-html-webpack-harddisk-plugin