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.