This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

了解可自定义的不同 webpack 打包器配置。

警告 已弃用：在 SDK 50 及更高版本中，Expo Webpack 已被 Expo Router 取代。了解如何将 Expo Webpack 迁移到 Expo Router。

要启用 Webpack Web 支持，请使用 expo.web.bundler 字段修改你的应用配置：

{
  "expo": {
    "web": {
      "bundler": "webpack"
    }
  }
}

自定义 Webpack 配置

当你运行 npx expo start --web 或 expo export:web 时，CLI 会检查你的项目根目录中是否有 webpack.config.js。如果该文件在项目中不存在，那么 Expo 将使用默认的 @expo/webpack-config（推荐）。

要编辑该配置，请将 @expo/webpack-config 安装为开发依赖，并在项目根目录创建一个模板 webpack.config.js。可以通过运行以下命令来完成：

现在你可以基于默认配置对配置对象进行修改，并将其返回给 Expo CLI 使用。删除该配置后，Expo 会再次回退到默认配置。

如果你创建了新的 webpack 配置或对其进行了任何更改，则需要通过运行以下命令重新启动 webpack 开发服务器：

示例

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

// Expo CLI 会等待此方法，因此你可以选择返回一个 promise。
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 如果你想在配置中添加一个新的别名。
  config.resolve.alias['moduleA'] = 'moduleB';

  // 也许你想在开发模式下关闭压缩。
  if (config.mode === 'development') {
    config.devServer.compress = false;
  }

  // 或者在构建时阻止压缩 bundle。
  if (config.mode === 'production') {
    config.optimization.minimize = false;
  }

  // 最后返回新的配置供 CLI 使用。
  return config;
};

编辑静态文件

你也可以使用 npx expo customize 生成静态项目文件，例如 index.html 等。这些文件可用于以更熟悉的方式自定义你的项目。

你在终端提示中选择的所有文件都会被复制到项目根目录下的 web 目录中。可以将该目录视为 Create React App 中的 public。之所以使用 web 而不是 public，是因为 Expo webpack 仅用于 Web，静态目录不适用于 Android 或 iOS 应用。对于移动平台，特定于平台的项目文件包含在 android 和 ios 目录中。

删除这些文件中的任何一个都会导致 Expo webpack 回退到各自的默认副本。

为什么

• 自定义 favicon 图标。
• 将第三方 API 代码添加到你的 index.html 中的 <head/>。