--- title: Running Webpack and Webpack Dev Server --- 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 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 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: