跳到主要内容
版本:1.0.0

静态资源

v0.4 及以上支持 Farm 支持三种资源加载方式: url , inline , raw

以 URL 形式使用

导入图片:

import rocketUrl from './assets/rocket.svg'; // return the url of this image

export function Main() {
return <img src={rocketUrl} /> // using the url
}

导入图片时默认以 URL 的形式。 当使用 URL 形式导入图像时,图像将直接复制到输出目录,并且图像模块本身将被编译为 js 模块,如下所示:

export default '/rocket.<content hash>.svg'

使用 compilation.output.assetsFilename 来配置你的资源名称。

内联

使用查询 ?inline 告诉 Farm 你想要内联你的资源,然后资源将被转换为 base64,例如:

// importer
import logo from './assets/logo.png?inline'; // logo is a base 64 str

// the image module will be compiled to:
export default 'data:image/png,base64,xxxxx==';

原始字符串

例如,使用查询?raw告诉 Farm 您要读取资产的原始字符串

// import 
import logo from './assets/license.txt?raw'; // return the content string of the assets

// the txt file will be compiled to:
export default 'MIT xxxx';

相关配置

  • 使用 compilation.output.assetFileName 来控制产物文件名
  • 使用 compilation.assets.include 将更多类型的文件视为静态资源。
export default {
compilation: {
output: {
assetsFilename: 'assets/[resourceName].[hash].[ext]', // [] 里面的是 Farm 支持的全部占位符
},
assets: {
include: ['txt'] // 额外静态资源类型
}
}
}