使用 webpack 打包

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

已弃用：在 SDK 50 及更高版本中，Expo Webpack 已被弃用，取而代之的是 Expo 路由。了解如何 从 Expo Webpack 迁移到 Expo Router。

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

¥To enable Webpack web support, modify your app config using the expo.web.bundler field:

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

自定义 Webpack 配置

¥Customizing the Webpack config

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

¥When you run npx expo start --web or expo export:web the CLI checks to see if your project has a webpack.config.js in the root directory. If the file doesn't exist in your project, then Expo uses the default @expo/webpack-config (preferred).

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

¥To edit the config, install @expo/webpack-config as a dev dependency and create a template webpack.config.js at the root of your project. This can be done by running the following command:

你现在可以根据默认配置更改配置对象并将其返回以供 Expo CLI 使用。删除配置将导致 Expo 再次回退到默认值。

¥You can now make changes to a config object based on the default config and return it for Expo CLI to use. Deleting the config will cause Expo to fall back to the default again.

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

¥If you create a new webpack config or make any changes to it you'll need to restart your webpack dev server by running:

示例

¥Example

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

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // If you want to add a new alias to the config.
  config.resolve.alias['moduleA'] = 'moduleB';

  // Maybe you want to turn off compression in dev mode.
  if (config.mode === 'development') {
    config.devServer.compress = false;
  }

  // Or prevent minimizing the bundle when you build.
  if (config.mode === 'production') {
    config.optimization.minimize = false;
  }

  // Finally return the new config for the CLI to use.
  return config;
};

编辑静态文件

¥Editing static files

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

¥You can also use npx expo customize to generate static project files such as index.html and so on. These can be used to customize your project more familiarly.

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

¥All the files you select from the terminal prompt will be copied to a web directory in your project's root directory. Think of this directory as public in Create React App. The web is used instead of public because Expo webpack is web-only, the static directory does not work for Android or iOS apps. For mobile platforms, the platform-specific project files are included in android and ios directories.

删除任何这些文件都会导致 Expo webpack 恢复到其各自的默认副本。

¥Deleting any of these files will cause Expo webpack to fall back to their respective default copies.

为什么

¥Why

• 自定义网站图标。

  ¥Customizing the favicon icon.

• 将第三方 API 代码添加到 index.html 中的 <head/>。

  ¥Adding third-party API code to the <head/> in your index.html.