在前端开发中，webpack 作为一个打包工具被广泛使用，它能够将多个源文件打包成一个或多个输出文件，方便前端开发人员将项目资源整合、压缩、上传服务器等。
然而，在使用 webpack 进行打包时，会遇到一个问题：不需要打包的第三方库和 Node.js 内置模块被打包进了输出文件，导致体积变大、加载速度变慢。
为了解决这个问题，开发者可以使用 npm 包 cdm-webpack-node-externals。
cdm-webpack-node-externals 是什么
cdm-webpack-node-externals 是一个 webpack 插件，它可以帮助我们忽略掉需要在运行时再加载的模块，从而使生成的包更小、加载速度更快。
cdm-webpack-node-externals 支持两种模式： Whitelist 和 Blacklist。前者是在默认情况下排除所有依赖，然后手动添加在白名单中的依赖；后者则是在默认情况下包含所有依赖，然后手动排除在黑名单中的依赖。
cdm-webpack-node-externals 如何使用
安装
在使用 cdm-webpack-node-externals 之前，需先确保已经安装好 webpack。
安装 cdm-webpack-node-externals：
npm install --save-dev cdm-webpack-node-externals
引入
在 webpack 配置文件中，引入 cdm-webpack-node-externals：
const nodeExternals = require('cdm-webpack-node-externals');使用
使用 Whitelist 模式：
module.exports = {
// ...
externals: [
nodeExternals({
whitelist: ['lodash'],
}),
],
};使用 Blacklist 模式：
module.exports = {
// ...
externals: [
nodeExternals({
blacklist: ['lodash'],
}),
],
};示例代码
最后，我们来看一个完整的 webpack 配置文件示例代码，以帮助大家更好地理解如何使用 cdm-webpack-node-externals：
-- -------------------- ---- -------
----- ------------- - --------------------------------------
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- -
---------------
---------- -----------
---
--
--总结
cdm-webpack-node-externals 作为一个 webpack 插件，能够帮助我们忽略掉需要在运行时再加载的模块，优化前端项目打包后的体积和加载速度。通过本文的介绍，相信大家已经能够更好地掌握 cdm-webpack-node-externals 的使用方法，并可以在实际项目中灵活使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608581e8991b448deb9a