aframe-super-hot-loader

Webpack loader for hot reloading A-Frame components and shaders.

Usage no npm install needed!

<script type="module">
  import aframeSuperHotLoader from 'https://cdn.skypack.dev/aframe-super-hot-loader';
</script>

README

aframe-super-hot-loader

Webpack loaders for enabling Hot Module Replacement on A-Frame HTML, components, and shaders.

Live reload A-Frame, components, and shaders. Never refresh the page during development again!

Watch Video

Usage

npm install --save aframe-super-hot-loader
npm install --save aframe-super-hot-html-loader

There are two separate Webpack loaders, one for JS and one for HTML. In your Webpack config:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js/,
        exclude: /(node_modules)/,
        use: ['aframe-super-hot-loader']
      },
      {
        test: /\.html/,
        exclude: /(node_modules)/,
        use: ['aframe-super-hot-html-loader']
      }
    ]
  }
  // ...
}

Then run webpack-dev-server with hot enabled:

webpack-dev-server --hot --inline

or in your Webpack config:

module.exports = {
  devServer: {
    hot: true
  }
};

Example

There's a boilerplate example in the examples/ directory:

cd examples
npm install
npm run start

Then try it out by modifying files. If you'd like to incorporate into your own project, you can start from that boilerplate base and / or absorb the Webpack configuration.