Skip to content

Latest commit

 

History

History
104 lines (79 loc) · 1.92 KB

README.md

File metadata and controls

104 lines (79 loc) · 1.92 KB
Raw

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

Installation

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

Webpack Config

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']
      }
    ]
  }
  // ...
}

Dev Server

Then run webpack-dev-server with hot enabled:

webpack-dev-server --hot --inline

or in your Webpack config:

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

Requiring

For the HTML loader, you'll need to require an HTML file through Webpack that contains your scene, which will be injected into your index.html.

// index.js
require('./scene.html');

And an example HTML file:

<!-- index.html -->
<html>
  <head>
    <script src="build/build.js"></script>
  </head>
  <body>
    <!-- require('./scene.html') will be injected here from the JS build. -->
  </body>
</html>

Boilerplate 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.