start folder->webpack-config.js
            var webpack = require("webpack");

            module.exports = {
              entry: "./src/index.js",
              output: {
                path: "dist/assets",
                filename: "bundle.js",
                publicPath: "assets"
              },
              devServer: {
                inline: true,
                contentBase: './dist',
                port: 3000
              },
              module: {
                loaders: [
                  {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    loader: ["babel-loader"],
                    query: {
                      presets: ["latest", "stage-0", "react"]
                    }
                  }
                ]
              }
            }

In the previous video, we looked at how the Babel CLI can help us transpile JavaScript that uses new syntax into static 
files that use browser-supported syntax. This approach offers performance benefits in the browser because all transpiling 
happens before runtime. 
As an alternative to this, we can use module bundlers like webpack to handle some of this work for us.

Webpack is a module bundler that helps us create static files and helps us automate processes that need to happen 
before our files can go into production.

Think about a typical HTML file. We might load several different scripts making several HTTP requests.
Webpack will run several commands at a time to create a bundle file. This bundle packages scripts, dependencies and 
even CSS into one file. And one file means one request. The first thing that we need to do to use webpack is we're going
to create a webpack config file. In the start folder, I'm going to go ahead and save this as webpack.config.js.

The webpack config is going to describe everything that we want webpack to do to our files to ready them for production.
So we'll use module.exports, and we're going to create an entry point for this file. 
So the entry point is just the source file. So we'll use ./source, index.js. 
The next thing we'll specify is the output. So where do we want to output these files? 
Now in order to make this a little bit different than our previous, we're going to create a path.

We're going to use dist/assets. Then we're going to specify a filename, which will be bundle.js.
And then finally, we want to add a node here for public path, and this is going to be assets. So this is the folder name where all of these bundled files will reside, or bundle file, I should say. Next we're going to use another key here called module, and we're going to specify some loaders.

Now webpack has a ton of different loaders that you can choose from, but basically, these are all the different tasks that we want webpack to perform. So the first step of the task we're going to set up in this video is the Babel loader, and we're going to look for any files that have a .js extension. So .js. Then we're going to exclude anything we want. So here we will exclude just our node modules folder.

Next we'll use the name of the loader, which is Babel loader. And finally, we can specify any presets that we'd like to. So just as we did in our Babel RC file, we're going to say presets, latest, stage 0 and react. Awesome, let me clean up these single quotes just for consistency.

And there we go. The other thing I want to do here real quick, it's usually good practice to import webpack or require it. So we'll require webpack. Excellent. Let's add one more thing here to our webpack config file, and that is the devServer. So something that is very useful when working with webpack is this devServer. And what this is going to do is it's going to be a server, just like httpster, but the good news about this is it will automatically reload as soon as I make any changes.

So it enables hot reloading, which is a pretty nice feature for us as developers. So we're going to say inline is true, contentBase. So where are our files located? We're going to look in dist, and then we're going to run everything on port 3000. So now that we have done this, we need to install several npm packages. Great, so in our terminal window, let's go ahead and npm install webpack. We're going to install the Babel loader.

We're going to install the webpack dev server, and all of these are going to be installed as dev dependencies. Cool. Now that I've done that, I'm going to run webpack. Now this says webpack command not found, and there's a couple different ways that we can fix this problem. One way is that we can install webpack globally using our sudo npm install -g webpack. If you'd prefer not to use a global command, what you can do is this, you can use ./node_modules/.bin/webpack.

So that's going to dig that out from the node modules folder and run webpack thusly. So that worked okay. We have created a bundle js from the index js file. Pretty cool. So let's take a look at our Sublime Text here. We should, in the start folder, have a new file called assets, and this has bundled everything up for us.

Pretty cool. Now in our index js file, let's also make sure that we're linking to the correct file. So we're going to look in the assets folder for the bundle js. Now the final thing I want to do here in the packaged JSON file is I want to, instead of using httpster, remember we installed the webpack devServer? And that's going to handle loading all of our files for us. So let's use ./node_modules/.bin/webpack dev server. Now when I go back to the terminal and type npm start, this should serve everything up on localhost 3000.

There we go. So we're using the webpack devServer. The benefit of this is if I make any changes at all to my files, those are going to automatically rebuild for me. So let me go a little split screen on this and open our index file. And I'm going to change our Hello World message to HEY WORLD. And we should see that, that reloads without having to refresh.

Pretty cool.

@@ -1,20 +1,40 @@
+(ly react ess tra)%0A%0A
 start folder-%3Ewebpac
@@ -122,16 +122,22 @@
 orts = %7B
+      
 %0A       
@@ -163,24 +163,56 @@
 c/index.js%22,
+          //creating entry point
 %0A           
@@ -340,52 +340,170 @@
 ets%22
-%0A              %7D,%0A              devServer: %7B
+            //folder where 'bundle' file will reside%0A              %7D,%0A              devServer: %7B          //a server like http along with hotreloading feature! :D
 %0A   
@@ -567,16 +567,54 @@
 ./dist',
+          //all files are located here
 %0A       
@@ -755,16 +755,60 @@
 /%5C.js$/,
+  //look for any file that has .js extension
 %0A       
@@ -846,16 +846,54 @@
 dules)/,
+  //don't look in /node_modules folder
 %0A       
@@ -1021,16 +1021,21 @@
 %22react%22%5D
+   //
 %0A       
@@ -1117,16 +1117,81 @@
       %7D%0A
+$npm install webpack babel-loader webpack-dev-server --save-dev%0A%0A
 %0AIn the 

Update webpack.js