DEV Community

loading...
Cover image for Three.JS-Webpack Boilerplate

Three.JS-Webpack Boilerplate

aakatev profile image Artem ・1 min read

Overview

Three.JS is an awesome library. It is based on WebGL, and has a straightforward, and well-documented API. However, I found that project's initial setup may require some boilerplate.

I created some minimal configuration to bootstrap a project, and want to share with everyone. It includes webpack, webpack-dev-server, and prettier. I also included one of three.js demo projects, to test deployment on GitHub pages.

The boilerplate is available on GitHub, and you can play with the demo here.

Instructions

Development

Clone the project, and install dependencies

git clone https://github.com/aakatev/three-js-webpack.git
npm i
Enter fullscreen mode Exit fullscreen mode

Run webpack-dev-server

npm run start
Enter fullscreen mode Exit fullscreen mode

Deployment

(Optional) Format your code

npm run format
Enter fullscreen mode Exit fullscreen mode

Bundle javascript

npm run build
Enter fullscreen mode Exit fullscreen mode

Upload on any static website hosting, like GitHub pages! Done!

Discussion (2)

pic
Editor guide
Collapse
bcoal profile image
bcoal

Great post, thanks heaps Artem!

Collapse
bl4ck2308panth1 profile image
bl4ckpanth3r

Thanks for the effort mate, I was facing a hard time getting my webpack to work and then I found your template. Cheers