9 external api call example

README.md

@@ -1,8 +1,17 @@
-# Webbpack Express Example App
+# Webpack Express Example App
 
 The goal of this repo is be an example of a basic but functional app built on Express and Webpack.
 
-If you want to follow along, start from master and look at the numbered branches of this project. Each one is a step along the path to creating a fully functional webpack setup. In each branch, there will be a documentation file that lists out the steps taken in that branch (each step is also a git commit if you look at the history) which you can use as a checklist when setting up your own projects. 
+If you want to follow along with the course, you will start from the master and switch to the appropriate numbered branches of this repo as needed. The branches are:
+- [0-initial-setup](https://github.com/udacity/fend-webpack-content/tree/0-initial-setup)
+- [1-install-webpack](https://github.com/udacity/fend-webpack-content/tree/1-install-webpack)
+- [2-add-webpack-entry](https://github.com/udacity/fend-webpack-content/tree/2-add-webpack-entry)
+- [3-webpack-output-and-loaders](https://github.com/udacity/fend-webpack-content/tree/3-webpack-output-and-loaders)
+- [4-webpack-plugins](https://github.com/udacity/fend-webpack-content/tree/4-webpack-plugins)
+- [5-webpack-mode](https://github.com/udacity/fend-webpack-content/tree/5-webpack-mode)
+- [6-webpack-for-convenience](https://github.com/udacity/fend-webpack-content/tree/6-webpack-for-convenience)
+
+Each one is a step along the path to creating a fully functional webpack setup. In each branch, there will be a documentation file that lists out the steps taken in that branch (each step is also a git commit if you look at the history) which you can use as a checklist when setting up your own projects. 
 
 ## Get Up and Running
 
@@ -15,4 +24,4 @@ git clone -- git@github.com:[your-user-name]/webpack-express.git --
 `cd` into your new folder and run:
 - ```npm install```
 - ```npm start``` to start the app
-- this app runs on localhost:8080, but you can of course edit that in server.js
+- this app runs on localhost:8080, but you can of course edit that in index.js

STEP-5.md

@@ -0,0 +1,46 @@
+# Step 5 - Webpack Mode
+
+In Webpack, there are two ways you can set the environment mode:
+
+## #1. Through the CLI
+
+```
+webpack --mode=production
+```
+
+## #2. In the config
+
+```
+module.exports = {
+  mode: 'production'
+};
+```
+
+Projects will use either one. If using the CLI flag, you can create conditional statements in your webpack config that check the environment before adding a setting, like this:
+
+```
+if (argv.mode === 'development') {
+    config.devtool = 'source-map';
+  }
+```
+
+If you choose option 2 and declare mode in the webpack config, then you’ll have two webpack config files - one for dev and one for prod. 
+
+From what I have seen, option 2 is a bit more common. And that is the way we’ll go.
+
+Go ahead and rename the webpack config file we have to `webpack.dev.js` and create a new one, also at root, called `webpack.prod.js`. 
+
+Add the correct mode flag to each one:
+
+```
+mode: "development"/"production"
+```
+
+We also have to edit our npm script to use the correct files we run `npm run build`. Your scripts will look like this:
+
+```
+    "build-prod": "webpack --config webpack.prod.js",
+    "build-dev": "webpack --config webpack.dev.js"
+```
+
+