Running Webpack and Webpack Dev Server

Running Webpack and Webpack Dev Server
0.0 0

#1

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.

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>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Webpack Example</title>
  <style type="text/css"></style>
</head>
<body>
  <!-- React app will be injected into the following `div` element: -->
  <div id="app">
    <div data-reactid=".0">
      <h1 data-reactid=".0.0">This is one cool app!</h1>
    </div>
  </div>
  <!-- Include bundled JavaScript: -->
  <script src="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
  • Using minification on our dist/bundle.js

#2

Hi! Nice tutorials :+1:

With Webpack 2 there is an error that can be easily solved. The loader, in our case β€œbabel”, must be suffixed with β€œ-loader”. So, the complete line where we define the loader must be.

loader: 'babel-loader',

The file webpack.config.js should be like this:

var path = require('path');
var srcPath = path.join(__dirname, 'src');
var buildPath = path.join(__dirname, 'dist');

module.exports = {
  context: srcPath,
  entry: path.join(srcPath, 'js', 'client.js'),
  output: {
      path: buildPath,
      filename: "bundle.js"
  },
  module: {
      loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015']
            }
          }
      ]
  }
};

#3

Thanks for the post.

How do you deploy your project to GitHub once you have finished with the development cycle? Is it a simple case of uploading your files from the ./dist folder? How does it use the Dependencies such as React and ReactDOM if we are not uploading any of the node_modules.

I have created a couple React projects, however I cannot seem to publish them using GitHug pages.

Here is the repo to a project I am trying to publish - https://github.com/nimaiwalsh/React-YouTube-Search

Kind regards,

Nimai


#4