The time has come to use Webpack. Because Webpack is installed globally, we can run the following in our terminal:
webpack
This will run our `webpack.config.js` file. It should run successfully, and we should see something like this appear in our terminal:
Hash: 2474b15611d8d75c5a39
Version: webpack 1.12.14
Time: 1721ms
Asset Size Chunks Chunk Names
bundle.js 679 kB 0 <ahref='https://webpack.github.io/docs/webpack-dev-server.html'target='_blank'rel='nofollow'>emitted] main
+ 159 hidden modules
Notice that it refers to an `Asset` called `bundle.js`. Webpack is telling us that this file has been created when we ran the `webpack` command. Check out your `dist` folder, and you should see your `bundle.js` alongside your `index.html`.
Our tree will now look like this:
.
├── dist
| ├── bundle.js
│ └── index.html
├── node_modules
├── package.json
├── src
│ └── js
│ └── client.js
└── webpack.config.js
So now that we have a `dist/bundle.js`, our `dist/index.html` file is now referring to a file that exists! If we take a look at `bundle.js`, we'll see that it's a bundle of all the JavaScript files in our project. Cool!
Go ahead and search for some contents of our `dist/bundle.js`, like `This is one cool app!`. We can see its context in the file, it's within a weird looking method:
_createClass(Main, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h1',
null,
'This is one cool app!'
)
);
}
}]);
This is what Babel has done; it has converted the code to ES5 and bundled it among other JavaScript files - including all our Node Modules, of course. Now all our React files can refer to this bundle using ES6 `import` statements.
Finally, it's time to check out the app in a browser. For this, we are going to use Webpack Dev Server, which is a feature-rich tool to use for setting up a `localhost` server for developing purposes when using Webpack.
* [Help: More about Webpack Dev Server</a>
Go ahead and run:
webpack-dev-server --content-base dist
We need to include `--content-base dist` to specify a content base to Webpack Dev Server, so that it knows where to get files to serve; in this case, it's the `dist` folder, because that is the folder that we are using for **production** as opposed to the `src` folder, which we are using for *development**.
In our terminal, we should see something like the following:
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Code/react-webpack-example/dist
Hash: 2474b15611d8d75c5a39
Version: webpack 1.12.14
Time: 3738ms
Following that will be a very long list of all the files bundled into `dist/bundle.js` by Webpack. Amazing!
Now is the time to head to the URL provided by that `webpack-dev-server` command, `http://localhost:8080/`. We should see a page with an `h1` that reads:
This is one cool app!
Let's Check out your Elements pane of our Developer Tools. We should have the following:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>React Webpack Example</title>
<styletype="text/css"></style>
</head>
<body>
<!-- React app will be injected into the following `div` element: -->
<divid="app">
<divdata-reactid=".0">
<h1data-reactid=".0.0">This is one cool app!</h1>
</div>
</div>
<!-- Include bundled JavaScript: -->
<scriptsrc="bundle.js"></script>
</body>
</html>
If we this to what we wrote in `src/js/client.js`, we will see how React renders into the `dist/index.html`.
If you got this far, well done! Now you know how to set up a workspace using React, Webpack and ES6 code, which is awesome, and gives you the starting point for making impressive web apps using cutting edge technologies.
In the next tutorial we will cover some more advanced steps, including:
* Going into more detail with React
* Looking at some other cool features of Webpack, like compiling Sass files
