在前端开发中，模块化开发是一个非常常见的开发方式。而在模块化开发中，webpack 是一个非常重要的工具。webpack 的 node_modules 目录下有很多模块，其中有一些模块可能会造成构建性能或是 bundle 大小等问题。这时候我们需要使用 webpack-node-modules-list 来管理 node_modules 目录中的模块。
简介
webpack-node-modules-list 是一款可以帮助开发者剔除 node_modules 目录下不必要的模块的 npm 包。它可以在 webpack 构建过程中统计出所有依赖的包名，并生成一个可以忽略这些包的白名单，这样在下一次构建时，这些包将不再被打包，可以显著地减小构建后的体积。
安装
使用 npm 进行安装即可：
npm install webpack-node-modules-list --save-dev
使用
在 webpack 配置文件中，引入 webpack-node-modules-list 模块，并在 plugins 中使用。
-- -------------------- ---- -------
----- - ---------------------- - - -------------------------------------
-------------- - -
-- ---
-------- -
--- ------------------------
----- -------------------- -------
--------- ------------
---
-
--在配置的 plugins 中，我们传递了一个对象。其中的 path 表示用于搜索 package.json 文件的目录。fileName 是一个可选参数，它表示白名单的文件名，默认为 whitelist。
执行构建后，我们可以在项目根目录中找到一个名为 whitelist 的文件。此文件中存储了 webpack-node-modules-list 插件分析出来的模块白名单。
这样一来，下一次我们在进行构建时，webpack-node-modules-list 就会忽略白名单中的模块，不会将其打包进 bundle 之中。这样就能够有效地减小 bundle 大小，提高后续加载速度。
示例代码
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- - ---------------------- - - -------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ------------------------
----- -------------------- -------
--------- ------------
---
--
--实践建议
在使用 webpack-node-modules-list 时，需要根据实际项目情况进行配置。如果项目中存在一些公共模块，它们可能被多个应用程序使用，这时候我们需要在白名单中添加这些公共模块，否则会出现找不到模块的错误。
此外，在构建过程中，我们可以根据需要修改白名单文件，以达到自己想要的效果。因此，建议在初次使用时，需要仔细检查白名单是否符合期望，并根据需要进行调整。
结语
webpack-node-modules-list 是一个非常有用的工具，它可以帮助我们控制打包的模块数量，提高我们构建的性能。在实际开发中，我们也需要灵活地运用这种工具，去解决一些具体的问题。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddd5