前言
在使用 webpack 打包前端应用时，通常会将代码拆分为多个 chunk，以便实现按需加载等优化。但是，如果不进行额外处理，每个 chunk 中都会包含模块映射表，导致文件大小增加，并且存在安全问题。为了解决这个问题，我们可以使用 webpack-chunk-manifest-plugin 这个 npm 包。
本文将介绍如何使用 webpack-chunk-manifest-plugin 来去除 chunk 中的模块映射表，以达到优化代码大小和安全的目的。
安装
npm install --save-dev webpack-chunk-manifest-plugin
使用
在 webpack 配置文件中引入 webpack-chunk-manifest-plugin：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------- - -----------------------------------------
-------------- - -
-----
-------- -
--- ---------------------
--------- ----------------------
----------------- ------------------
--------------- -----
--
-
--其中，filename 指定输出的文件名，manifestVariable 指定要使用的变量名，inlineManifest 指定是否将 manifest 内容内联到 html 文件中（如果为 false，则需要通过其他方式加载 manifest 文件）。
在 html 文件中，通过以下方式加载 manifest：
<script src="chunk-manifest.json"></script> <script> // `webpackManifest` 即为 `manifestVariable` console.log(webpackManifest); </script>
在每个 chunk 文件中，通过以下方式访问 manifest：
console.log(__webpack_chunk_manifest__); // webpack 1.x console.log(__webpack_chunk_load__); // webpack 2.x
示例代码
假设有三个入口文件 entry1.js，entry2.js 和 entry3.js，在 webpack 配置文件中使用 webpack-chunk-manifest-plugin 如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------- - -----------------------------------------
-------------- - -
------ -
------- ------------------
------- ------------------
------- ------------------
--
------- -
--------- ------------------------
----- ----------------------- -------
--
-------- -
--- ---------------------
--------- ----------------
----------------- ------------------
--------------- ----
--
--
--在 html 文件中，加载 manifest：
<script src="manifest.json"></script>
对于每个入口文件，访问 manifest：
console.log(__webpack_chunk_manifest__); // webpack 1.x console.log(__webpack_chunk_load__); // webpack 2.x
深度学习和指导意义
使用 webpack-chunk-manifest-plugin 可以有效地去除 chunk 中的模块映射表，减小文件体积，提高代码安全性。同时，该插件还可以通过指定 inlineManifest 为 true，将 manifest 内容内联到 html 文件中，进一步减少请求次数。
此外，学习使用 webpack-chunk-manifest-plugin 还可以帮助我们更好地理解 webpack 打包的过程，了解 webpack 如何将多个入口文件打包为多个 chunk，并实现按需加载等优化。这对于提高前端性能和代码质量有一定的指导意义。
总结
本文主要介绍了如何使用 webpack-chunk-manifest-plugin 插件来优化 webpack 打包后的代码大小和安全性。通过示例代码演示了如何在 webpack 配置文件中使用该插件，并在 html 和 js 文件中访问该插件生成的 manifest。同时，本文也探讨了使用该插件的深度学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7b81e8991b448dbd5d