I’m working on a three.js project and currently it’s all in an index.html. I’d like to break it out into chunks. It’s looking like using node and webpack will be my best bet. What do you guys do?
I also recommend you use Webpack. Writing all your scripts inside index.html is useful when the project is really small. As the project grows, Webpack is really helpful to manage and bundle multiple .js files into a .js file. This allows you to manage your codebase in folders to follow a more logical project structure. The initial setup could take some time, but once you’re up and running it will save you a lot of time.
I use a runtime loader that runs instantly with JS only, without slow pre-compilation or webpack, but it also has a backend for building through various processors for the final build, creating a documentation from comments etc. It loads files with loaders (like js, css etc) that also can be added for other formats to load files seamlessly. The good thing is that it runs with pure JS without a dependency mess often just causing errors, warnings and other issues. It also works with node and with workers.
There are many more or less comfortable ways to manage your project, there is no one best practice, this rather depends on what you need, for compilation, testing etc. and what dependencies you might use.
three.js and other projects I’m working on use ES6 modules in combination with rollup.js. Definitively recommandable 
Here is some sort of starter project for using the JSM modules of three.js:
1 Like
I use Webpack with hot reloading and then I use TypeScript, mostly for how well it works with VS code. My project is GUI heavy, though, and has a lot of dependencies, so you might find that just using rollup is the better way to go. I’m a huge fan of WebPack, but the amount of configuration that goes into it means that getting started with it can often feel rather tiresome, but once you get the hang of it, it’s great stuff.
1 Like