什么是 html-webpack-plugin-inner
html-webpack-plugin-inner 是一个可以在 webpack 的 html-webpack-plugin 插件内部嵌入任意封装好的 HTML 片段的 npm 包，它为前端开发者提供了更方便快捷的 HTML 片段嵌入方式。
如何使用 html-webpack-plugin-inner
安装
首先，我们需要安装 html-webpack-plugin 和 html-webpack-plugin-inner。
npm install html-webpack-plugin --save-dev npm install html-webpack-plugin-inner --save-dev
配置
我们首先需要创建一个 HTML 模板文件，例如 index.html，然后在 webpack 配置文件中的 plugins 内部加入一个 html-webpack-plugin 的实例。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---------------------- - -------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -------------
------- ------
---
--- -------------------------
--
-- ---
--在 webpack 配置文件中，我们需要首先引入 html-webpack-plugin 和 html-webpack-plugin-inner，并创建一个 plugin 实例。在 template 字段中指定我们创建的 HTML 模板文件，inject 设为 false 表示我们将不在 HTML 模板文件中嵌入任何资源链接。最后，创建一个 HtmlWebpackInnerPlugin 的实例并加入 plugins 数组内。
使用
在 HTML 模板文件中，我们需要在合适的位置插入一个类似于以下的占位符。
<!-- html-webpack-plugin-inner -->
然后，我们就可以在 webpack 的 entry 中指定一个 js 文件，该 js 文件将会在该占位符位置内部嵌入 HTML 片段。
例如，在我们创建的 index.html 文件中插入占位符。
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ----------- ----- ---------------- ----- --------------- ---------------------------- ----------------- ------- ------ ---- --------------- ---- ------------------------- --- ------- -------
在 webpack 的 entry 中指定需要嵌入的 HTML 片段所在的 js 文件，例如我们创建一个 util.js 文件。
module.exports = ` <p>Hello, world!</p> `;
在 webpack 的 entry 中加入一个包含 require('util.js') 的 js 文件：entry.js。
const util = require('./util.js');
document.querySelector('#app').innerHTML = util;最后，运行 webpack，你将会在生成的 HTML 文件中看到插入的 HTML 片段。
总结
利用 html-webpack-plugin-inner，我们可以像使用 Vue 的单文件组件一样，将 HTML 模板和 JavaScript 放在同一个文件中，方便前端开发者在管理和维护代码时进行统一处理。同时，html-webpack-plugin-inner 的使用方式也很简单，只需要按照上述教程中的步骤即可使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822c86