babylon-file-loader v0.2.1

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

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

hashes

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

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