Webpack to the rescue
If you want to find out more about Webpack, you can check that out here
To help get you started with Webpack I’ve created a boilerplate template for you to use from the start. It has all the config required and is set up with a hello world example.
A boilerplate Spark AR project with Webpack. Contribute to ashleymarkfletcher/spark-ar-boilerplate development by…
How to use
Once installed, run this from the terminal in the directory of the project:
This installs the dependencies to run Webpack.
Then run either of these two commands:
npm run dev
npm run build
Dev uses the “watch” flag to look for changes in your code and automatically compile the code into the script.js file. Use this during development to save manually compiling the code every time. The build command just runs the compiler once.
Once you have Webpack running, you can make changes and import all the files you want, and the Spark AR project should automatically pick up the changes.
Webpack config explained
All the magic for making Webpack work for Spark AR is in the webpack.config.js file.
Output is where we specify where the bundled JS is going to go. For us, this needs to be the script.js file that Spark AR looks for in the scripts folder.
Externals tell Webpack to ignore require statements. Ignoring require statements is vital because Spark has modules to require but doesn’t actually have the modules locally, they get added later on out of our scope. If we didn’t have them set as externals, Webpack would try and bundle those files and fail.
Here’s one I made earlier
As an experiment, I made an effect using the simplex-noise module. The effect visualizes Simplex noise to generate a voxel map procedurally. Using Webpack made creating this effect much more straightforward by being able to pull in amazing packages to help with the heavy lifting.
Try the effect on Instagram here: https://www.instagram.com/a/r/?effect_id=411882919538540
The code for the effect is here: