rayelliott
/
ThreeJS-Webpack-ES6-Boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Clarified some portions, updated sections related to assets refactoring

This commit is contained in:
Paul Graffam 2019-01-29 17:19:43 -05:00
parent 49e4c939e6
commit cb8f17be3e
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

@ -7,8 +7,8 @@ A basic boilerplate for a Three.js project including the use of Webpack and ES6
``` ```
build - Directory for built and compressed files from the npm build script build - Directory for built and compressed files from the npm build script
src - Directory for all dev files src - Directory for all dev files
├── css - Contains all SCSS files, that are compiled to `src/public/assets/css` ├── css - Contains all SCSS files, that are compiled to `src/public/css`
├── js - All the Three.js app files, with `app.js` as entry point. Compiled to `src/public/assets/js` with webpack ├── js - All the Three.js app files, with `app.js` as entry point. Compiled to `src/public/js` with webpack
│ ├── app │ ├── app
│ │ ├── components - Three.js components that get initialized in `main.js` │ │ ├── components - Three.js components that get initialized in `main.js`
│ │ ├── helpers - Classes that provide ideas on how to set up and work with defaults │ │ ├── helpers - Classes that provide ideas on how to set up and work with defaults
@ -16,7 +16,8 @@ src - Directory for all dev files
│ │ └── model - Classes that set up the model object │ │ └── model - Classes that set up the model object
│ ├── data - Any data to be imported into app │ ├── data - Any data to be imported into app
│ └── utils - Various helpers and vendor classes │ └── utils - Various helpers and vendor classes
└── public - Used by webpack-dev-server to serve content and is copied over to build folder with build command. Place external vendor files here. └── public - Used by webpack-dev-server to serve content. Webpack builds local dev files here.
└── assets - Is copied over to build folder with build command. Place external asset files here.
``` ```
## Getting started ## Getting started
@ -39,18 +40,18 @@ Spins up a webpack dev server at localhost:8080 and keeps track of all js and sa
npm run build npm run build
``` ```
Cleans existing build folder while linting js folder and then copies over the public folder from src. Then sets environment to production and compiles js and css into build. Cleans existing build folder while linting js folder and copies over the public assets folder from src. Then sets environment to production and compiles js and css into build.
## Other NPM Scripts ## Other NPM Scripts
You can run any of these individually if you'd like with the npm run command: You can run any of these individually if you'd like with the `npm run` command:
* prebuild - Cleans build folder and lints `src/js` * `prebuild` - Cleans up build folder and lints `src/js`
* clean - Cleans build folder * `clean` - Cleans build folder
* lint - Runs lint on `src/js` folder and uses `.eslintrc` file in root as linting rules * `lint` - Runs lint on the `src/js` folder and uses the `.eslintrc` file in root for linting rules
* webpack-server - Create webpack-dev-server with hot-module-replacement * `webpack-server` - Start up a webpack-dev-server with hot-module-replacement
* webpack-watch - Run webpack in dev environment with watch * `webpack-watch` - Run webpack in dev environment with watch
* dev:js - Run webpack in dev environment without watch * `dev:js` - Run webpack in dev environment without watch
* build:dir - Copy files and folders from `src/public` to `build` * `build:dir` - Copy files and folders from `src/public` to `build`
* build:js - Run webpack in production environment * `build:js` - Run webpack in production environment
## Input Controls ## Input Controls
* Press H to hide dat.GUI * Press H to hide dat.GUI