https://github.com/supermedium/aframe-super-hot-loader

🔥 Webpack loader for hot reloading A-Frame components and shaders.
https://github.com/supermedium/aframe-super-hot-loader

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/supermedium/aframe-super-hot-loader
• Owner: supermedium
• License: mit
• Created: 2019-02-23T00:19:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:18:59.000Z (almost 2 years ago)
• Last Synced: 2024-07-08T12:33:40.640Z (4 months ago)
• Language: JavaScript
• Homepage: https://youtu.be/uh_RQay3x80
• Size: 536 KB
• Stars: 87
• Watchers: 9
• Forks: 8
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• vr-resources - aframe-super-hot-loader, Webpack loader for hot reloading A-Frame components and shaders

README

        
## aframe-super-hot-loader

[aframe]: https://aframe.io

[hmr]: https://webpack.js.org/concepts/hot-module-replacement/

Webpack loaders for enabling [Hot Module Replacement][hmr] on [A-Frame][aframe]

HTML, components, and shaders.

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

development again!

**[Watch Video](https://youtu.be/uh_RQay3x80)**

### 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:

```js

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']

      }

    ]

  }

  // ...

}

```

[wds]: https://webpack.js.org/configuration/dev-server/

#### Dev Server

Then run [webpack-dev-server][wds] with `hot` enabled:

```

webpack-dev-server --hot --inline

```

or in your Webpack config:

```js

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.

```js

// index.js

require('./scene.html');

```

And an example HTML file:

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