webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目所需的每个模块组合成一个或多个 bundle（包），这些 bundle 是用于提供内容的静态资源。

核心概念

• 入口（Entry）：入口点指示 webpack 应该使用哪个模块来开始构建其内部依赖图。webpack 会找出入口点依赖的其他模块和库。默认值为 ./src/index.js，但可以在配置中指定不同的入口或多个入口。
• 输出（Output）：output 属性告诉 webpack 将创建的 bundle 发送到哪里以及如何命名这些文件。默认主输出文件为 ./dist/main.js，其他生成文件放在 ./dist 文件夹中。
• Loader：默认情况下，webpack 只理解 JavaScript 和 JSON 文件。Loader 允许 webpack 处理其他类型的文件，并将它们转换为有效的模块，以供应用程序使用并添加到依赖图中。Loader 有两个属性：test 标识要转换的文件，use 指示使用哪个 Loader 进行转换。
• 插件（Plugins）：插件可用于执行更广泛的任务，如 bundle 优化、资源管理和环境变量注入。要使用插件，需要导入它并将其添加到 plugins 数组中，通常通过 new 操作符创建实例。
• 模式（Mode）：通过将 mode 参数设置为 development、production 或 none，可以启用 webpack 内置的针对相应环境的优化。默认值为 production。
• 浏览器兼容性：webpack 支持所有符合 ES5 标准的浏览器（IE8 及以下版本不支持）。webpack 需要 Promise 支持 import() 和 require.ensure()。如果要在较旧的浏览器中使用，需要加载 polyfill。

适用人群

适用于前端开发人员、构建工具配置者、希望优化项目构建流程的团队。尤其适合使用模块化开发、需要处理多种资源类型（如 CSS、图片、字体）的现代 JavaScript 项目。

使用方式

从版本 4.0.0 开始，webpack 不需要配置文件即可打包项目。但为了满足定制需求，可以在项目根目录创建 webpack.config.js 文件，导出包含 entry、output、module（Loader）、plugins、mode 等属性的对象。也可以通过 CLI 直接传递参数。

注意事项

• 当使用正则表达式匹配文件时，不要将其引用为字符串，例如 /\\.txt$/ 是正确的，而 '/\\.txt$/' 是错误的。
• Loaders 应在 module.rules 下定义，而非 rules。
• webpack 5 需要 Node.js 版本 10.13.0 或更高版本。
• 在生产环境中建议将 mode 设置为 production 以启用压缩等优化。