前言
在前端开发过程中，Webpack 是一个十分强大的构建工具。它可以处理各种资源，包括但不限于文件、图片、CSS、JS 等等。但是，在 Webpack 处理 HTML 文件时，原生的 HtmlWebpackPlugin 并没有提供一个好的解决方案。如果需要将 HTML 文件保存到磁盘上，可以使用 html-webpack-plugin。但是，如果你需要将多个 HTML 文件单独保存到磁盘上，原生的 html-webpack-plugin 并不支持这个功能。因此，这时就可以使用 npm 包 @captemulation/html-webpack-harddisk-plugin。
模块介绍
@captemulation/html-webpack-harddisk-plugin 是一个 webpack 插件，可以将 webpack 生成的 HTML 文件保存到磁盘上。相较于原生的 HtmlWebpackPlugin，它的特点如下：
- 可以将多个 HTML 文件单独保存到磁盘上；
- 可以配置保存 HTML 文件的路径和文件名；
- 可以使用模板来自定义文件名；
- 配置简单，使用方便。
安装
在项目根目录下，使用 npm 安装 @captemulation/html-webpack-harddisk-plugin。
npm install --save-dev @captemulation/html-webpack-harddisk-plugin
如何使用
在 webpack.config.js 中引入插件，然后将插件配置在 plugins 中就可以了。
保存所有 HTML 文件
如果需要将所有的 HTML 文件都保存到磁盘上，只需要在 webpack.config.js 中配置如下的 plugins 就可以了：
const HardDiskPlugin = require('@captemulation/html-webpack-harddisk-plugin');
module.exports = {
// ...其他配置
plugins: [
new HardDiskPlugin(),
],
};保存指定的 HTML 文件
如果想要将指定的 HTML 文件保存到磁盘上，则需要在 HtmlWebpackPlugin 的配置中增加 harddiskPlugin 配置，配置方式如下：
-- -------------------- ---- -------
----- -------------- - -------------------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
--------- -------------
--------- -------------------
-- -- -------------- --
--------------- -
----------- ----------------------- -------------
--
---
--- -------------------
--------- -------------
--------- -------------------
-- -- -------------- --
--------------- -
----------- ----------------------- -------------
--
---
--- -----------------
--
--在 HtmlWebpackPlugin 中增加 harddiskPlugin，然后配置关闭 HtmlWebpackPlugin 的文件输出，最后增加一个 HardDiskPlugin 将文件输出到磁盘上。
自定义文件名
如果需要自定义文件名，在 HtmlWebpackPlugin 的配置中增加 harddiskPlugin 和 filename 配置，配置方式如下：
-- -------------------- ---- -------
----- -------------- - -------------------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
--------- -------------
--------- -------------------
--------------- -
----------- ----------------------- -------------
-- ------
--------- ----------------------
--
---
--- -------------------
--------- -------------
--------- -------------------
--------------- -
----------- ----------------------- -------------
-- ------
--------- ----------------------
--
---
--- -----------------
--
--示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -------------------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
---------- -
------------ ---------
--
-------- -
--- -------------------
--------- -------------
--------- -------------------
--------------- -
----------- ----------------------- -------------
--------- ----------------------
--
---
--- -------------------
--------- -------------
--------- -------------------
--------------- -
----------- ----------------------- -------------
--------- ----------------------
--
---
--- -----------------
--
--在使用本插件时，需要注意以下几点：
- 需要在 HtmlWebpackPlugin 中增加
harddiskPlugin配置； - 需要将 HtmlWebpackPlugin 中的
inject配置关闭（默认是开启的）； - 合理配置文件路径、文件名；
总结
@captemulation/html-webpack-harddisk-plugin 是一个非常实用的 webpack 插件，可以将 webpack 生成的 HTML 文件保存到磁盘上。它的配置非常简单，可以根据需要自由地配置文件路径、文件名。在项目中使用时，可以有效地提升前端开发的效率，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551d081e8991b448cf36c