# @expo/webpack-config 中文文档 规范地址：https://npmcn.com/package/%40expo/webpack-config/ 版本：19\.0\.1 npm 元数据更新时间：2026-09-23T11:27:24.617Z 中文译文更新时间：2026-11-14T05:27:53.956Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40expo/webpack-config 原文对照：https://npmcn.com/package/%40expo/webpack-config/?lang=original 项目主页：https://github.com/expo/expo-webpack-integrations/tree/main/packages/webpack-config#readme 源码仓库：https://github.com/expo/expo-webpack-integrations ## 关键信息（来自 npm 元数据） - 包体积（解压后）：442 kB，167 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - Node.js 要求：\>=12 - 运行依赖：23 个 - peer 依赖：expo ^49\.0\.7 \|\| ^50\.0\.0-0 - 首次发布：2019-03-08T10:42:33.840Z - 最新版本发布：2024-01-17T12:32:17.675Z - 近 30 天下载量：428545（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：228（近 12 个月 0 个） ## 中文简介 用于将博览会网站与博览会CLI捆绑在一起的Webpack配置. ## 安装 ```sh npm install @expo/webpack-config ``` 也可以使用：`pnpm add @expo/webpack-config`、`yarn add @expo/webpack-config`、`bun add @expo/webpack-config` ## README # 欢迎光临 `@expo/webpack-config` **Webpack 配置,用于运行通用反应和反应-本地网络项目** [![Circle CI](https://flat.badgen.net/circleci/github/expo/expo-cli?label=Circle%20CI&labelColor=555555&icon=circleci)](https://circleci.com/gh/expo/expo-cli/tree/main) * * * > QQ 博览会 Webpack 处于维护模式. 我们正在积极制定适用于所有平台的普遍捆绑解决办法. ## [文档](https://docs.expo.dev/guides/customizing-webpack/) 要了解更多如何使用 Webpack 配置, 请查看这里的文件 : [自定义 Webpack 配置](https://docs.expo.dev/guides/customizing-webpack/) ### 对文件的贡献 - [主分支的文档](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/guides/customizing-webpack.md) - [最近稳定发行的文件](https://docs.expo.dev/guides/customizing-webpack/) ## API 密码 运行 `expo customize:web` 将在您的工程中生成此默认配置. ```js const createExpoWebpackConfigAsync = require('@expo/webpack-config'); module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); // Customize the config before returning it. return config; }; ``` ## 类型 ### `Environment` 用于配置 `@expo/webpack-config` 工作时. | 名称 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `projectRoot` | `string` | 所需经费 | 博览会项目之根. | | `https` | `boolean` | `false` | Dev 服务器是否使用 https 协议 . | | `mode` | `Mode` | 所需经费 | 捆绑工程的 Webpack 模式 . | | `platform` | [`ExpoPlatform`](https://npmcn.com/package/%40expo/webpack-config/#readme-ExpoPlatform) | 所需经费 | 目标平台 捆绑起来. | | `pwa` | `boolean` | `true` | 以生产模式生成PWA图像资产. | | `babel` | [`ExpoBabelOptions`](https://npmcn.com/package/%40expo/webpack-config/#readme-ExpoBabelOptions) | `undefined` | 控制默认 Babel 加载器的配置 . | ### `Environment` 内部 | 名称 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `config` | `ExpoConfig` | `undefined` | 博览会项目配置,请使用 `@expo/config`。 。 。 . | | `locations` | `FilePaths` | `undefined` | 用来定位事物所在的路径. | ### `ExpoPlatform` \* 类型 \* \* 描述 \* \* |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - - - - -- - - - - - - --- - - - - - -- - - - - - - --- - - - - - - - - | `'ios' | 'android' | 'web' | 'electron'` 目标平台 捆绑。 原生平台是实验性的,需要特殊的原生运行时间. | ### `ExpoBabelOptions` 控制默认 Babel 加载器的配置 . | 名称 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `dangerouslyAddModulePathsToTranspile` | `string[]` | `undefined` | 添加应包含转接步骤的节点 模块名称 . | ## 指南 ### PWAs (美国) - 参见文件 [`expo-pwa`](https://npmcn.com/package/%40expo/pwa) 以便更多地了解如何手工创建资产. - 禁用自动 PWA 生成 `expo build:web --no-pwa`。 。 。 . - `expo build:web` 将自动跳过项目本地链接中的任何 PWA 资产 `web/index.html`。 。 。 . - 在全球安装了尖锐的CLI将会加速资产生成,如果不安装,Jimp将会被取而代之. #### 陈规定型 ##### 宣言.json 这个 `manifest.json` 将使用工程中的值创建 `app.config.js`数字 : 生成 `manifest.json` 如果项目中存在下列内容,则将跳出 `web/index.html`数字 : 显示 HTML ```html ``` 如果 `icons` 数组在您的 `manifest.json`,然后Chrome PWA图标生成将被跳过. ##### Chrome PWA 图标 图标将使用您定义的文件生成 `app.config.js` 下级 `android.icon` 它会回到 `icon`。 。 。 . 显示清单。 json ```json { "icons": [ { "src": "...", "sizes": "144x144", "type": "image/png" }, { "src": "...", "sizes": "192x192", "type": "image/png" }, { "src": "...", "sizes": "512x512", "type": "image/png" } ] } ``` #### 传真 将使用您定义的文件生成 Favicons `app.config.js` 下级 `web.favicon` 它会回到 `icon`。 。 。 . 如果您有下列任何一个字段, Favicons 的资产生成将被单独跳过: `web/index.html`数字 : 显示 HTML ```html ``` #### 萨法里 图标将使用您定义的文件生成 `app.config.js` 下级 `ios.icon` 它会回到 `icon`。喷出屏幕查看 `ios.splash` 返回到 `splash`。 。 。 . Safari PWA 图标/闪光屏幕的资产生成将单独跳过,如果您有下列字段: `web/index.html`数字 : ##### 图标 显示 HTML ```html ``` ##### 喷出屏幕 显示 HTML ```html ``` ### 包含模块 您可能发现您想要包含不属于默认模块的通用模块 。 您可以自定义 Webpack 配置 : ```ts const createExpoWebpackConfigAsync = require('@expo/webpack-config'); module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync( { ...env, babel: { dangerouslyAddModulePathsToTranspile: [ // Ensure that all packages starting with @evanbacon are transpiled. '@evanbacon', ], }, }, argv ); return config; }; ``` ### 修改 Bail 装载器 如果您想进一步修改 Bail 加载器, 您可以使用帮助方法获取它 `getExpoBabelLoader` 像这样: ```ts const createExpoWebpackConfigAsync = require('@expo/webpack-config'); const { getExpoBabelLoader } = require('@expo/webpack-config/utils'); module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); const loader = getExpoBabelLoader(config); if (loader) { // Modify the loader... } return config; }; ``` ### 服务人员 > 利用服务人员参加博览会的例子: `npx create-react-native-app -t with-workbox` 这个 Webpack 配置目前默认不提供服务工人, 他们可以加入本地项目 : [增加服务人员](https://github.com/expo/fyi/blob/main/enabling-web-service-workers.md)。 。 。 . ## 环境变量 - `EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS`: 如果定义插件明确设置环境变量, 如 `process.env.FOO` 而不是创建类似 `proces.env: { FOO }`默认为 `false`。下一个.js使用它来防止覆盖注入的环境变量. - `IMAGE_INLINE_SIZE_LIMIT`:默认情况下,小于一万字节的图像被编码为Base64中的数据URI并被内含在CSS或JS所构建的文物中. 设定以控制字节中的大小限制 。 设置为 0 会禁用图像的内衬 。 这只用于生产. ## 许可证 世博会的源代码可在 [麻省理工学院许可证](https://npmcn.com/package/%40expo/webpack-config/LICENSE)。一些附属单位的许可证不同,例如BSD许可证. * * * [![](https://img.shields.io/badge/Sponsored_by-Expo-4630EB.svg?style=for-the-badge&logo=EXPO&labelColor=000&logoColor=fff)](http://expo.dev/)[![License: MIT](https://img.shields.io/badge/License-MIT-success.svg?style=for-the-badge&color=33CC12)](https://npmcn.com/LICENSE) ## 常见问题 ### @expo/webpack-config 是什么？ 用于将博览会网站与博览会CLI捆绑在一起的Webpack配置\. ### 如何安装 @expo/webpack-config？ 在项目目录运行 npm install @expo/webpack-config，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（^49\.0\.7 \|\| ^50\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @expo/webpack-config 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @expo/webpack-config 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @expo/webpack-config 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @expo/webpack-config 可以商用吗？ @expo/webpack-config 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @expo/webpack-config 的下载量有多少？ 根据 npm 官方下载统计，@expo/webpack-config 在 2026/10/14 – 2026/11/12 这 30 天内被下载 428,545 次，日均约 14,285 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @expo/webpack-config 还在维护吗？ 最新版本 19\.0\.1 发布于 2024/01/17（2 年前）；至今共发布 228 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/03/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。