- Objective: - Breadcrumb: # 概念阐释 Webpack 是一个模块打包工具，它将网站开发中各种项目的依赖关系[^1]打包成一个或多个静态资源文件[^2]， 使浏览器可以加载并运行这些资源，最终实现用户可浏览的页面。 # 实例 在 React 中使用 Webpack将项目中的依赖关系转换为静态资源。 # 相关内容 ## 入口 入口（Entry）指定了 Webpack 应该从（你的项目中）哪个模块开始构建内部依赖图。默认值是 `./src/index.js` ## 出口 输出（Output）属性告诉 Webpack 在哪里输出打包后的文件（bundle[^3]）以及如何命名这些文件。主要输出文件的默认值是 `./dist/main.js`，其他生成文件默认放置在 `./dist` 文件夹中。 ## loader webpack 只能理解 JavaScript 和 JSON 文件，加载器（Loaders）允许 Webpack 处理各种类型的文件，将它们转换为应用程序可用的模块。 ## 插件 插件（Plugins）用于执行更广泛的任务，如优化打包、管理资源和注入环境变量。 ## 模式 通过选择 `development`, `production` 或 `none` 之中的一个，来设置 `mode` 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 `production`。内置优化包括功能包括代码分割、treeshaking、模块合并、压缩优化、缓存优化。 ## 浏览器兼容性 Webpack 支持所有符合 [ES5 标准](https://kangax.github.io/compat-table/es5/) 的浏览器（不支持 IE8 及以下版本） ## 环境 Webpack 5 运行于 Node.js v10.13.0+ 的版本。 # 参考资料 [^1]: 依赖关系指的是在项目中使用的各种模块、库和资源文件之间的相互依赖引用。例如，JS 模块之间的引用、CSS 与 HTML 之间的引用，Webpack 会分享和处理这些依赖关系。 [^2]: 静态资源文件是构建网页和应用程序所必需的基本元素，这些文件通常在网页加载时被浏览器请求并加载，最终展示在用户界面中。这些文件通常被像 Webpack 这样的工具处理，以提高加载速度和用户体验。 [^3]: "Bundle" 是指Webpack 处理完你的应用程序的所有文件（如 JavaScript 文件、CSS 文件、图片等）后生成的一个或多个打包后的文件。这些文件通常包含了应用程序的全部或部分代码，以及所有必要的依赖。因此，虽然 "bundle" 可以包括静态资源，但它的含义更广泛，涵盖了所有被 Webpack 打包的资源。 - [webpack 核心概念的高级概述](https://webpack.js.org/concepts/) - [devv](https://devv.ai/zh/search?threadId=d6k62nbqtjwg)