欢迎光临
@expo/webpack-config

Webpack 配置,用于运行通用反应和反应-本地网络项目

QQ 博览会 Webpack 处于维护模式. 我们正在积极制定适用于所有平台的普遍捆绑解决办法.

文档

要了解更多如何使用 Webpack 配置, 请查看这里的文件 : 自定义 Webpack 配置

对文件的贡献

• 主分支的文档
• 最近稳定发行的文件

API 密码

运行 expo customize:web 将在您的工程中生成此默认配置.

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 工作时.

Environment 内部

ExpoPlatform

* 类型 * * 描述 * * |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - - - - -- - - - - - - --- - - - - - -- - - - - - - --- - - - - - - - - | 'ios' | 'android' | 'web' | 'electron' 目标平台 捆绑。 原生平台是实验性的,需要特殊的原生运行时间. |

ExpoBabelOptions

控制默认 Babel 加载器的配置 .

指南

PWAs (美国)

• 参见文件 expo-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数字 :

<link rel="manifest" href="..." />

如果 icons 数组在您的 manifest.json,然后Chrome PWA图标生成将被跳过.

Chrome PWA 图标

图标将使用您定义的文件生成 app.config.js 下级 android.icon 它会回到 icon。 。 。 .

{
  "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数字 :

<link rel="icon" type="image/png" sizes="16x16" href="..." />
<link rel="icon" type="image/png" sizes="32x32" href="..." />
<link rel="shortcut icon" href="..." />

萨法里

图标将使用您定义的文件生成 app.config.js 下级 ios.icon 它会回到 icon。喷出屏幕查看 ios.splash 返回到 splash。 。 。 .

Safari PWA 图标/闪光屏幕的资产生成将单独跳过,如果您有下列字段: web/index.html数字 :

图标

<link rel="apple-touch-icon" sizes="180x180" href="..." />

喷出屏幕

<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
  href="..."
/>
<link
  rel="apple-touch-startup-image"
  media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
  href="..."
/>

包含模块

您可能发现您想要包含不属于默认模块的通用模块 。 您可以自定义 Webpack 配置 :

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 像这样:

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 配置目前默认不提供服务工人, 他们可以加入本地项目 : 增加服务人员。 。 。 .

环境变量

• EXPO_WEBPACK_DEFINE_ENVIRONMENT_AS_KEYS: 如果定义插件明确设置环境变量, 如 process.env.FOO 而不是创建类似 proces.env: { FOO }默认为 false。下一个.js使用它来防止覆盖注入的环境变量.
• IMAGE_INLINE_SIZE_LIMIT:默认情况下,小于一万字节的图像被编码为Base64中的数据URI并被内含在CSS或JS所构建的文物中. 设定以控制字节中的大小限制 。 设置为 0 会禁用图像的内衬 。 这只用于生产.

许可证

世博会的源代码可在 麻省理工学院许可证。一些附属单位的许可证不同,例如BSD许可证.