npm install --save-dev babylon-file-loader

By default the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource.

import scene from './scene.babylon'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.babylon$/,
        use: [
          {
            loader: 'babylon-file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

Emits scene.babylon and accompanying manifest (if it exists) as files in the output directory and returns the public URL

"/public/path/0dcbbaa7013869e351f.babylon"
"/public/path/0dcbbaa7013869e351f.babylon.manifest"

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |name|{String\|Function}|[hash].[ext]|Configure a custom filename template for your file| |context|{String}|this.options.context|Configure a custom file context, defaults to webpack.config.js context| |publicPath|{String\|Function}|__webpack_public_path__ |Configure a custom public path for your files| |outputPath|{String\|Function}|'undefined'|Configure a custom output path for your files| |useRelativePath|{Boolean}|false|Should be true if you wish to generate a context relative URL for each file| |emitFile|{Boolean}|true|By default a file is emitted, however this can be disabled if required (e.g. for server side packages)|

name

You can configure a custom filename template for your file using the query parameter name. For instance, to copy a file from your context directory into the output directory retaining the full directory structure, you might use

{String}

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[path][name].[ext]'
  }  
}

{Function}

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name (file) {
      if (env === 'development') {
        return '[path][name].[ext]'
      }

      return '[hash].[ext]'
    }
  }  
}

placeholders

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |[ext]|{String}|file.extname|The extension of the resource| |[name]|{String}|file.basename|The basename of the resource| |[path]|{String}|file.dirname|The path of the resource relative to the context| |[hash]|{String}|md5|The hash of the content, hashes below for more info| |[N]|{Number}|``|The n-th match obtained from matching the current file name against the query param regExp|

hashes

[<hashType>:hash:<digestType>:<length>] optionally you can configure

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |hashType|{String}|md5|sha1, md5, sha256, sha512| |digestType|{String}|base64|hex, base26, base32, base36, base49, base52, base58, base62, base64| |length|{Number}|9999|The length in chars|

By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.

context

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[path][name].[ext]',
    context: ''
  }  
}

You can specify custom output and public paths by using outputPath, publicPath and useRelativePath

publicPath

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/'
  }  
}

outputPath

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'scenes/'
  }  
}

useRelativePath

useRelativePath should be true if you wish to generate a relative URL to the for each file context.

{
  loader: 'babylon-file-loader',
  options: {
    useRelativePath: process.env.NODE_ENV === "production"
  }
}

emitFile

By default a file is emitted, however this can be disabled if required (e.g. for server side packages).

import scene from './scene.babylon'

{
  loader: 'babylon-file-loader',
  options: {
    emitFile: false
  }  
}

⚠️ Returns the public URL but does not emit a file

`${publicPath}/0dcbbaa701328e351f.babylon`

import scene from './scene.babylon'

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: 'dirname/[hash].[ext]'
  }  
}

dirname/0dcbbaa701328ae351f.babylon

Not returned but is emitted

dirname/0dcbbaa701328ae351f.babylon.manifest

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[sha512:hash:base64:7].[ext]'
  }  
}

gdyb21L.babylon

Not returned but is emitted

gdyb21L.babylon.manifest

import scene from 'path/to/scene.babylon'

webpack.config.js

{
  loader: 'babylon-file-loader',
  options: {
    name: '[path][name].[ext]?[hash]'
  }  
}

path/to/scene.babylon?e43b20c069c4a01867c31e98cbce33c9

Not returned but is emitted

path/to/scene.babylon.manifest?e43b20c069c4a01867c31e98cbce33c9