简介
@skidding/html-webpack-plugin 是一款非常好用的 webpack 插件，可以帮助前端开发人员在 webpack 构建过程中，自动生成 HTML 文件并且可以自定义添加相关的资源。
安装
使用 npm 安装：
npm install @skidding/html-webpack-plugin
使用 yarn 安装：
yarn add @skidding/html-webpack-plugin
使用
@skidding/html-webpack-plugin 的使用非常简单，只需要在 webpack 配置文件中配置即可。
-- -------------------- ---- -------
----- ----------------- - -----------------------------------------
-------------- - -
-------- -
--- -------------------
------ --- -----
--------- -----------------
---
--
--如上代码所示，我们只需要在 plugins 中加入 new HtmlWebpackPlugin() 就可以了。
配置项
title: 设置 HTML 页面的标题。template: 指定 HTML 模板文件的路径。filename: 指定生成文件的文件名，默认是index.html。inject: 将所有的资源注入到模板中的位置，可选的值有true/false/'head'/'body'。favicon: 将指定的图片文件作为网站图标。minify: 压缩生成的 HTML 文件，可选的值有Object类型参数。hash: 给所有生成的文件名都添加一个 hash，防止浏览器的缓存问题。chunks: 指定引入的 chunk 文件列表，可以是一个字符串或者字符串数组。
示例
以下是一个通过 @skidding/html-webpack-plugin 生成 HTML 文件的示例，我们首先需要在项目中安装一些必要的依赖包:
- webpack
- webpack-cli
- webpack-dev-server
- @babel/core
- @babel/preset-env
- @babel/preset-react
- @skidding/html-webpack-plugin
首先我们需要创建一个 src 目录，并在其中创建一个 App.js 文件:
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
-----
----------- ---- ------ ---------
---------- -- -- ------------
------
--
------ ------- ----然后创建一个 index.js 文件，将 App 组件渲染到页面上。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));此时我们在 src 目录中创建一个 index.html 文件，作为我们的 HTML 模板文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- ------------------------------- ----------
-------
------
---- ----------------
-------
-------接着，我们需要创建一个 webpack.config.js 文件，作为 webpack 配置文件，并在其中配置 @skidding/html-webpack-plugin 插件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -----------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
------ -------- ---- ------ ------
--------- -----------------
---
--
------- -
------ -
-
----- --------------
-------- -----------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
--此时我们使用 webpack 将项目打包到 dist 目录中，在 dist 目录中会生成一个 index.html 文件，并将 bundle.js 文件自动注入到该 HTML 文件中，且我们也可以配置 favicon 和其他相关选项。
结论
@skidding/html-webpack-plugin 插件是一款非常好用的 webpack 插件，它可以帮助前端开发人员在 webpack 构建过程中快速生成 HTML 文件，并且可以自定义添加相关的资源，对于前后端分离的项目来说，是不可或缺的一款插件。希望本文能够对您有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005520c81e8991b448cf8f1