The final step of our module bundler goal is to generate a minified and ready-for-production file.

Most of the configuration is complete, missing just a few more steps.

The first step is to set up an entry point for the application, then an index file that will start it all, index.js, is to be placed inside the src folder with the contents as follows:

import React from 'react';
import Application from './Application.jsx';

var mountNode = document.getElementById('application-container'''),
React.render(React.createElement(Application, {}), mountNode);

We haven't covered in detail the implementation of this file in the book, so be sure to check the attached source files to understand better how it works.

In the webpack configuration file, we need to add both an output path to indicate where the bundled files will be placed and the new entry file we just created, as follows:

module.exports = {
  context: __dirname,
  entry: {
    index: './src/index.js'
  },

  output: {
    path: 'dist',
    filename: '[name]-[hash].js'
  },

  module: {
    loaders: [
      {
        test: /(.js)|(.jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

Then, all that it is left is to create a build task in our package.json file:

"scripts": {
    "test": "./node_modules/karma/bin/karma start karma.conf.js",
    "watch-test": "./node_modules/karma/bin/karma start karma.conf.js --auto-watch --no-single-run",
    "build": "webpack -p",
    "dev": "webpack-dev-server --inline --hot"
  },

Run it and check the built files into the dist folder, as follows:

npm run build