使用 webpack 打包

编辑页面

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

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

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

app.json

{
  "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。可以通过运行以下命令来完成：

Terminal

- npx expo customize webpack.config.js

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

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

Terminal

- npx expo start

示例

webpack.config.js

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/>。