Skip to main content

自定义 Webpack 配置

Remotion 提供了它自己的 Webpack 配置。

🌐 Remotion ships with it's own Webpack configuration.

你可以通过创建一个函数以 reducer 风格来覆盖它，该函数接受之前的 Webpack 配置并返回新的配置。

🌐 You can override it reducer-style by creating a function that takes the previous Webpack configuration and returns the the new one.

使用命令行进行渲染时​

🌐 When rendering using the command line

在你的 remotion.config.ts 文件中，你可以从 @remotion/cli/config 调用 Config.overrideWebpackConfig()。

🌐 In your remotion.config.ts file, you can call Config.overrideWebpackConfig() from @remotion/cli/config.

remotion.config.ts
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});
info

使用 reducer 模式有助于类型安全，为你提供自动补全，确保向前兼容性，并保持完全灵活——你可以只覆盖一个属性，或者传入一个全新的 Webpack 配置。

使用 bundle() 和 deploySite() 时​

🌐 When using bundle() and deploySite()

在使用 Node.JS API 时 - bundle() 用于 SSR 或 deploySite() 用于 Lambda，你还需要提供 Webpack 覆盖，因为 Node.JS API 不会读取配置文件。我们建议你将 webpack 覆盖放在一个单独的文件中，这样你可以从命令行和你的 Node.JS 脚本中读取它。

🌐 When using the Node.JS APIs - bundle() for SSR or deploySite() for Lambda, you also need to provide the Webpack override, since the Node.JS APIs do not read from the config file. We recommend you put the webpack override in a separate file so you can read it from both the command line and your Node.JS script.

src/webpack-override.ts
import {WebpackOverrideFn} from '@remotion/bundler';

export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};
remotion.config.ts
import {Config} from '@remotion/cli/config';
import {webpackOverride} from './src/webpack-override';

Config.overrideWebpackConfig(webpackOverride);

使用 bundle：

🌐 With bundle:

my-script.js
import {bundle} from '@remotion/bundler';
import {webpackOverride} from './src/webpack-override';

await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  webpackOverride,
});

或者在使用 deploySite 时：

🌐 Or while using with deploySite:

my-script.js
import {deploySite} from '@remotion/lambda';
import {webpackOverride} from './src/webpack-override';

await deploySite({
  entryPoint: require.resolve('./src/index.ts'),
  region: 'us-east-1',
  bucketName: 'remotionlambda-c7fsl3d',
  options: {
    webpackOverride,
  },
  // ...other parameters
});

多个 Webpack 覆盖​

🌐 Multiple Webpack overrides

如果你有多个重写，你应该对它们进行柯里化：

🌐 If you have multiple overrides, you should curry them:

import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((c) => enableScss(enableTailwind(c)));

从 Remotion v4.0.229 开始，你也可以多次使用 Config.overrideWebpackConfig，但这只在配置文件中有效：

🌐 From Remotion v4.0.229, you can also use Config.overrideWebpackConfig multiple times, but this only works in the config file:

import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig(enableScss);
Config.overrideWebpackConfig(enableTailwind);

片段​

🌐 Snippets

启用 MDX 支持​

🌐 Enabling MDX support

  1. 安装以下依赖：
npm i --save-exact @mdx-js/loader @mdx-js/react
  1. 创建一个带有 Webpack 覆盖的文件：
enable-mdx.ts
export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: '@mdx-js/loader',
              options: {},
            },
          ],
        },
      ],
    },
  };
};
  1. 将其添加到配置文件中：
remotion.config.ts
import {Config} from '@remotion/cli/config';
import {enableMdx} from './src/enable-mdx';

Config.overrideWebpackConfig(enableMdx);
  1. 如果有必要，也将其添加到你的 Node.JS API 调用 中。
  2. 在你的项目中创建一个包含 declare module '*.mdx'; 的文件以修复出现的 TypeScript 错误。

启用 TailwindCSS 支持​

🌐 Enable TailwindCSS support

启用 SASS/SCSS 支持​

🌐 Enable SASS/SCSS support

最简单的方法是使用 @remotion/enable-scss。 按照这些 说明 来启用它。

🌐 The easiest way is to use the @remotion/enable-scss.
Follow these instructions to enable it.

启用 SVGR 支持​

🌐 Enable SVGR support

这允许你将 import SVG 文件作为 React 组件启用。

🌐 This allows you to enable import SVG files as React components.

  1. 安装以下依赖：
npm i --save-exact @svgr/webpack
  1. 声明一个重写函数：
src/enable-svgr.ts
import {WebpackOverrideFn} from '@remotion/bundler';

export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          resourceQuery: {not: [/url/]}, // Exclude react component if *.svg?url
          use: ['@svgr/webpack'],
        },
        ...(currentConfiguration.module?.rules ?? []).map((r) => {
          if (!r) {
            return r;
          }
          if (r === '...') {
            return r;
          }
          if (!r.test?.toString().includes('svg')) {
            return r;
          }
          return {
            ...r,
            // Remove Remotion loading SVGs as a URL
            test: new RegExp(r.test.toString().replace(/svg\|/g, '').slice(1, -1)),
          };
        }),
      ],
    },
  };
};
  1. 将覆盖函数添加到你的 remotion.config.ts 文件中：
remotion.config.ts
import {Config} from '@remotion/cli/config';
import {enableSvgr} from './src/enable-svgr';

Config.overrideWebpackConfig(enableSvgr);
  1. 如果有必要，也将其添加到你的 Node.JS API 调用 中。
  2. 重新启动 Remotion Studio。

启用对 GLSL 导入的支持​

🌐 Enable support for GLSL imports

  1. 安装以下依赖：
npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader
  1. 声明一个 webpack 覆盖:
src/enable.glsl.ts
import {WebpackOverrideFn} from '@remotion/bundler';

export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
        {
          test: /\.(glsl|vs|fs|vert|frag)$/,
          exclude: /node_modules/,
          use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],
        },
      ],
    },
  };
};
remotion.config.ts
import {Config} from '@remotion/cli/config';
import {enableGlsl} from './src/enable-glsl';

Config.overrideWebpackConfig(enableGlsl);
  1. 将以下内容添加到你的入口点（例如 src/index.ts）：
declare module '*.glsl' {
  const value: string;
  export default value;
}
  1. 如果有必要，也将其添加到你的 Node.JS API 调用 中。
  2. 通过删除 node_modules/.cache 文件夹重置 webpack 缓存。
  3. 重新启动 Remotion Studio。

启用 WebAssembly​

🌐 Enable WebAssembly

WebAssembly 有两种模式：异步和同步。我们建议测试两种模式，看看哪一种适用于你要使用的 WASM 库。

🌐 There are two WebAssembly modes: asynchronous and synchronous. We recommend testing both and seeing which one works for the WASM library you are trying to use.

remotion.config.ts - synchronous
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      syncWebAssembly: true,
    },
  };
});
note

由于 Webpack 不允许在主代码块中使用同步 WebAssembly 代码，你最有可能需要使用 lazyComponent 来声明你的组合，而不是 component。请查看一个 演示项目 作为示例。

remotion.config.ts - asynchronous
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      asyncWebAssembly: true,
    },
  };
});

在你完成之后，清除 Webpack 缓存：

🌐 After you've done that, clear the Webpack cache:

rm -rf node_modules/.cache

重启后，你可以使用导入语句导入 .wasm 文件。

🌐 After restarting, you can import .wasm files using an import statement.

如果有必要，将 Webpack 覆盖也添加到你的 Node.JS API 调用 中。

🌐 Add the Webpack override to your Node.JS API calls as well if necessary.

更改 @jsxImportSource​

🌐 Change the @jsxImportSource

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    module: {
      ...config.module,
      rules: config.module?.rules?.map((rule) => {
        // @ts-expect-error
        if (!rule?.use) {
          return rule;
        }

        return {
          // @ts-expect-error
          ...rule,
          // @ts-expect-error
          use: rule?.use.map((use) => {
            if (!use?.loader?.includes('esbuild')) {
              return use;
            }
            return {
              ...use,
              options: {
                ...use.options,
                jsxImportSource: 'react',
              },
            };
          }),
        };
      }),
    },
  };
});

使用传统 Babel 加载器​

🌐 Use legacy babel loader

请参阅 使用传统 Babel 转译。

🌐 See Using legacy Babel transpilation.

启用 TypeScript 别名​

🌐 Enable TypeScript aliases

请参阅 TypeScript 别名。

🌐 See TypeScript aliases.

自定义配置文件位置​

🌐 Customizing configuration file location

你可以向命令行传递 --config 选项，以指定配置文件的自定义位置。

🌐 You can pass a --config option to the command line to specify a custom location for your configuration file.

在 remotion.config.ts 中导入 ES 模块v4.0.117​

🌐 Importing ES Modules in remotion.config.tsv4.0.117

配置文件 会在 CommonJS 环境中执行。如果你想导入 ES 模块，你可以传递一个异步函数给 Config.overrideWebpackConfig：

🌐 The config file gets executed in a CommonJS environment. If you want to import ES modules, you can pass an async function to Config.overrideWebpackConfig:

remotion.config.ts
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig(async (currentConfiguration) => {
  const {enableSass} = await import('./src/enable-sass');
  return enableSass(currentConfiguration);
});

另请参阅​

🌐 See also

Last updated on