Skip to main content

自定义 Webpack 配置

Remotion 集成了自己的 Webpack 配置

您可以通过创建一个函数来覆盖它的 reducer 样式,该函数接受先前的 Webpack 配置并返回新的配置。

在命令行中渲染时

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

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules ?? []),
// Add more loaders here
],
},
};
});
remotion.config.ts
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()

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

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

使用 bundle 时:

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
 
await bundle({
entryPoint: require.resolve("./src/index.ts"),
webpackOverride,
});
my-script.js
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
 
await bundle({
entryPoint: require.resolve("./src/index.ts"),
webpackOverride,
});

或者在使用 deploySite 时:

my-script.js
ts
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
});
my-script.js
ts
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
});

代码片段

启用 MDX 支持

  1. 安装以下依赖项:
npm i --save-exact @mdx-js/loader @mdx-js/react
npm i --save-exact @mdx-js/loader @mdx-js/react
  1. 创建一个带有 Webpack 覆盖的文件:
enable-mdx.ts
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: {},
},
],
},
],
},
};
};
enable-mdx.ts
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
ts
import { Config } from "@remotion/cli/config";
import { enableMdx } from "./src/enable-mdx";
 
Config.overrideWebpackConfig(enableMdx);
remotion.config.ts
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 支持

启用 SASS/SCSS 支持

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

启用 SVGR 支持

这允许您将 import SVG 文件作为 React 组件。

  1. 安装以下依赖项:
npm i --save-exact @svgr/webpack
npm i --save-exact @svgr/webpack
  1. 声明一个覆盖函数:
src/enable-svgr.ts
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.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),
),
};
}),
],
},
};
};
src/enable-svgr.ts
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.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
ts
import { Config } from "@remotion/cli/config";
import { enableSvgr } from "./src/enable-svgr";
 
Config.overrideWebpackConfig(enableSvgr);
remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSvgr } from "./src/enable-svgr";
 
Config.overrideWebpackConfig(enableSvgr);
  1. 如果需要,也将其添加到您的Node.JS API调用中

  2. 重新启动 Remotion Studio。

启用 GLSL 导入支持

  1. 安装以下依赖项:
npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader
npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader
  1. 声明一个 webpack 覆盖:
src/enable.glsl.ts
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"],
},
],
},
};
};
src/enable.glsl.ts
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
ts
import { Config } from "@remotion/cli/config";
import { enableGlsl } from "./src/enable-glsl";
 
Config.overrideWebpackConfig(enableGlsl);
remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableGlsl } from "./src/enable-glsl";
 
Config.overrideWebpackConfig(enableGlsl);
  1. 将以下内容添加到您的入口点(例如 src/index.ts):
ts
declare module "*.glsl" {
const value: string;
export default value;
}
ts
declare module "*.glsl" {
const value: string;
export default value;
}
  1. 如果需要,也将其添加到您的Node.JS API调用中

  2. 通过删除 node_modules/.cache 文件夹来重置 webpack 缓存。

  3. 重新启动 Remotion Studio。

启用 WebAssembly

有两种 WebAssembly 模式:异步和同步。我们建议测试两种模式,看看哪种适用于您尝试使用的 WASM 库。

remotion.config.ts - synchronous
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
return {
...conf,
experiments: {
syncWebAssembly: true,
},
};
});
remotion.config.ts - synchronous
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
return {
...conf,
experiments: {
syncWebAssembly: true,
},
};
});
note

由于 Webpack 不允许在主块中使用同步 WebAssembly 代码,您很可能需要使用 lazyComponent 来声明您的组合,而不是 component。查看一个演示项目以获取示例。

remotion.config.ts - 异步
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
return {
...conf,
experiments: {
asyncWebAssembly: true,
},
};
});
remotion.config.ts - 异步
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
return {
...conf,
experiments: {
asyncWebAssembly: true,
},
};
});

完成后,请清除 Webpack 缓存:

bash
rm -rf node_modules/.cache
bash
rm -rf node_modules/.cache

重新启动后,您可以使用 import 语句导入 .wasm 文件。

如果需要,在您的 Node.JS API 调用 中添加 Webpack 覆盖。

使用传统的 babel loader

请参阅使用传统的 Babel 转译

启用 TypeScript 别名

请参阅TypeScript 别名

自定义配置文件位置

您可以在命令行中传递 --config 选项来指定配置文件的自定义位置。

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

配置文件 在 CommonJS 环境中执行。如果您想要导入 ES 模块,可以将异步函数传递给 Config.overrideWebpackConfig

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
const { enableSass } = await import("./src/enable-sass");
return enableSass(currentConfiguration);
});
remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
const { enableSass } = await import("./src/enable-sass");
return enableSass(currentConfiguration);
});

参见