npm 包 chunk-manifest-inject2html-webpack-plugin 使用教程
在前端开发中，webpack 是非常常用的打包工具。在大型项目中我们的代码会被拆分成很多个小的 Chunk，这就会导致我们生成的 HTML 文件中无法正确引用这些 Chunk。于是我们就需要使用一些插件来自动将 Chunk 注入到 HTML 文件中。本文将介绍一个使用非常方便的 webpack 插件 chunk-manifest-inject2html-webpack-plugin。
简介
chunk-manifest-inject2html-webpack-plugin 是一个自动向 HTML 文件中注入 chunkManifest 的 webpack 插件。通过这个插件，我们可以自动引用正确的 Chunk 文件。
安装
首先我们需要在项目中安装这个插件。可以通过 npm 来进行安装：
npm i chunk-manifest-inject2html-webpack-plugin --save-dev
使用
安装完成后，在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ------------------- - -----------------------------------------
----- ------------------------- - -----------------------------------------------------
-------------- - -
-- --- ---- ------- --
-------- -
--- ---------------------
--------- ----------------------
----------------- -----------------
---
--- ---------------------------
---------------------- ------------------
--------- ------------------------- -------------
--
-
-在这里给出了两个插件的配置，ChunkManifestPlugin 用于生成 chunk-manifest.json 文件，ChunkManifestInjectPlugin 用于将其注入到 HTML 文件中。
示例
一个完整的 webpack 配置文件例子：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------- - -----------------------------------------
----- ------------------------- - -----------------------------------------------------
----- ------- - -------------------
----- ---- - ----------------
----- ----- - -
------- -------------------- -------
--------- -------------------- ---------
-
-------------- - -
------ -
---- -----------------
--
------- -
--------- -------------------
----- ---------------
----------- ----
--
-------- -
--- --------------------
--- ---------------------
--------- ----------------------
----------------- -----------------
---
--- ---------------------------
---------------------- ------------------
--------- ------------------------- -------------
--
-
-使用上述配置，webpack 将会自动在 HTML 文件中注入包含正确 Chunk 引用的 script 标签，而不必手动进行引用。
总结
chunk-manifest-inject2html-webpack-plugin 是一个非常方便的 webpack 插件，可以大大减轻我们手动引用 Chunk 的烦恼，使我们的开发代码更加简洁。希望本文能够对大家学习和使用这个插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fd81e8991b448d51a4