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!
npm install --save aframe-super-hot-loader
npm install --save aframe-super-hot-html-loader diff-dom
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 } };
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>
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.