Skip to main content
Version: 0.15

Static Assets

Since v0.4 Farm supports three resource loading methods: url, inline, raw

url

Import a image:

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

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

Default to use url method when import a image. When using url methods to import a image, the image will be emitted to the output dir directly, and the image module itself will be compiled to a js module like:

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

using compilation.output.assetFilename to config your asset name。

inline

Using query ?inline to tell Farm that you want to inline your assets,then the assets will be transformed to base64,for example:

// 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

Using query ?raw to tell Farm that you want to read the raw string of the assets, for example

// 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';

Configuring Assets

  • Using compilation.output.assetFileName to control the production file name
  • using compilation.assets.include to treat more kind of files as asset modules.
export default {
compilation: {
output: {
assetFilename: 'assets/[resourceName].[hash].[ext]', // [] is a placeholder, Farm currently only these three kind of placeholders
},
assets: {
include: ['txt'] // extra static asset extension
}
}
}