threejs-with-npm-and-webpack/README.md

## To build

To build the dist/bundle.js, using the package.json info, you would just do the following two steps:

    npm install
    npm run build

This is typical of how many web tools are packaged today. Even though we use the node package manager, the output is for running in a web browser (not node). But the node ecosystem is used for packages and for tools to "bundle" the code into a form usable in a browser.

Open [hello.html](hello.html).


## How these files were created (tutorial)

To go through the full process, rm the package.json and regenerate it with:

    npm init -y

This makes an empty [package.json](package.json) in this directory. When you install with npm install --save, the names of packages get added to "dependencies" in this file, so that later you can just "npm install" to reinstall all the dependencies (it's like pip + requirements.txt if that sounds familiar).

First install three js with npm, following <https://threejs.org/docs/#manual/en/introduction/Installation>

    npm install --save three

**npm** will create an add the files to node_modules/ folder.  Check it out:

    ls node_modules

(nb you may sometimes see: **npm i** instead of npm install, it's the same)

Install the special orbitcontrols package, following <https://github.com/jameshsu1125/lesca-threejs-orbitcontrols>

	 npm install lesca-threejs-orbitcontrols --save


Use webpack to create a browser friendly "bundle", following [the webpack docs](https://webpack.js.org/).


    npm install --save webpack webpack-cli

Note how installing webpack pulls in a bunch of other packages that it relies on (look in node_modules now!). The extra files don't matter though, when you make your "distributable" output it will only have stuff that your final code needs. You don't need to copy the node_modules folder (it's only used for development). Check out the [webpack config file](webpack.config.js). It's very close the example given on the [webpack page](https://webpack.js.org/#bundle-it).

Check out the [source file](src/hello.js). Then finally, use webpack to translate your src file (and it's dependencies) into an output "dist" (distributable) file:

    npx webpack

NB: The command is **npx** and it means run the webpack program that's in the node_modules/bin.

By default webpack uses the webpack.config.js file to figure out what the "entry" point of the code is (src/hello.js), and where to put the output. 

Open [hello.html](hello.html) with your browser (NB: it uses the *hopefully* correctly generated output file dist/bundle.js).

**Each time you change src/hello.js you need to run npx webpack to rebundle/rebuild the output.**

Eventually you can set the mode option to "production" to make the output smaller (takes more time though to build it and debugging might be harder when there are bugs).

```javascript
  entry: './src/hello.js',
  mode: 'production',
```
Also if you want to do it like other projects, you can add your "build command" to the package.json like this:

```javascript
...
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
...
}
```

Then you can:

	npm run build