html-webpack-display-loader-plugin 是一个用于 Webpack 的插件，它可以在打包过程中将所有的打包文件的路径输出至 HTML 页面中，方便我们查看文件的引用路径，实现前后端代码分离的开发。
本篇文章将详细介绍如何使用 html-webpack-display-loader-plugin 这一 npm 包，帮助读者更好地掌握前端开发的技能。
安装
使用 npm 安装 html-webpack-display-loader-plugin
npm install html-webpack-display-loader-plugin --save-dev
使用
在 webpack.config.js 中引入 html-webpack-display-loader-plugin:
const HtmlWebpackDisplayLoaderPlugin = require('html-webpack-display-loader-plugin');然后在 plugins 中加入该插件：
-- -------------------- ---- -------
-------------- - -
-------- -
--- -------------------
-- ----------------- ----
---
--- --------------------------------
----------- ----------------------- --------
----------------- ----
---
--
--HtmlWebpackPlugin 是 html-webpack-display-loader-plugin 的依赖，所以我们还需要在 webpack 的配置文件中引入 HtmlWebpackPlugin。outputPath 指定了我们要在哪个文件夹存放输出的 html 文件，removeOutputPath 值为 true 则会将 outputPath 的路径从输出的 HTML 中去掉。
示例代码
打包前的 HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
-------
------
------- ---------------------- ------------------------------------------------------
------- ---------------------- -------------------------------------------------
-------
-------使用 html-webpack-display-loader-plugin 后，在打包后的 HTML 页面中能看到以上两个 script 标签的绝对路径：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
-------
------
------- ---------------------- ----------------------------------------------------------------
------- ---------------------- -----------------------------------------------------------
-------
-------如此，我们就可以方便地查看文件的引用路径。
总结
在前端开发中，使用 Webpack 可以大大提高代码的复用性和开发效率。html-webpack-display-loader-plugin 这个 npm 包可以帮助我们更好地了解打包后文件的引用路径，实现前后端代码分离的开发。
通过本文，我们详细介绍了 html-webpack-display-loader-plugin 的安装、使用方法和示例代码，希望对读者有所帮助，提高其前端技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebd81e8991b448dc730