在 Web 开发中，前端工程化已经成为了必不可少的部分，对于前端工程化的工具，webpack 可以说是最受欢迎的。随着前端项目变得越来越复杂，webpack 的插件体系也越来越完善。
本文将为大家介绍 npm 包 webpack-entry-html-plugin 的使用教程。该插件可以自动将 webpack 打包生成的 js 文件引入到 html 中，同时还可以为每个 html 文件生成相应的入口 js 文件。
安装 webpack-entry-html-plugin
首先我们需要通过 npm 安装该插件。
npm install webpack-entry-html-plugin --save-dev
使用 webpack-entry-html-plugin
下面详细介绍如何在项目中使用该插件。
配置 webpack
首先需要在 webpack 的配置文件中引入该插件并进行相应的配置。以 webpack.config.js 为例：
-- -------------------- ---- -------
-- -----------------
----- ------------------------ - ------------------------------------
-------------- - -
------ -
------ -----------------
------- ------------------
----- ---------------
--
-------- -
--- ------------------------
--------- --------------------
----- -----
------- ----------
--------- ------------
---
--- ------------------------
--------- --------------------
----- -----
------- -----------
--------- -------------
---
--- ------------------------
--------- --------------------
----- -----
------- ---------
--------- -----------
---
-
-上述配置中，我们分别针对项目中的每个 html 页面进行了配置。其主要配置项参数含义如下：
template: 模板文件路径；hash: 是否在 js 文件名后添加 hash 值；chunks: 指定该页面所需的 js 文件；filename: 生成的 html 文件名。
配置 html 模板
在 webpack 的配置文件中，我们指定了模板文件路径，需要在该模板文件中进行相应的配置。示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
-------------------------------- ------------
-------
------
---- ----------------
---- ----- ------------------- ----- ------ -- ----- -- -- ---
---- ------------- --- ---- ---
------- ---------------------- -----------------------------------------------------
-- -- ---------------------------------------- - --
------- ---------------------- ----------------------------------------------------
-- - --
-- -- ----------------------------------------- - --
------- ---------------------- -----------------------------------------------------
-- - --
-- -- --------------------------------------- - --
------- ---------------------- ---------------------------------------------------
-- - --
-------
-------注：在模板文件中使用了 ejs 模板引擎，请确保已经安装该插件。
编写 js 文件
最后需要编写 js 文件，可以直接在示例代码中放置一个空的 js 文件即可。
// index.js // detail.js // cart.js
总结
在复杂的前端项目开发过程中，webpack 提供了很多的插件，webpack-entry-html-plugin 就是其中一个非常实用的插件，可以自动将 webpack 打包生成的 js 文件引入到 html 中，简化前后端分离项目构建流程，并提高开发效率。
上述代码已经可以直接使用，建议开发者朋友们在自己的项目中试试，相信这个插件会为你的项目构建过程带来不小的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc74