Getting Started with Webpack + React

Published on October 19, 2017


Getting Started with Webpack + React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

This aim of this tutorial is to set up a development environment for a React application bundled using Webpack. While the merits of Webpack and other bundlers are continually compared, this tutorial will let you get started with Webpack and help you decide for yourself.


If you don’t have them already, you will need to install node and npm. These two tools will allow us to manage our dependencies via the package.json. In the root project folder, run npm init and answer the setup questions to set up the package.json (the default answers should work for most users).

In addition, we’ll need the node libraries for React and Webpack plus libraries for transpilation. This can be done with a string of commands while in the root folder:

  • npm install --save react react-dom create-react-class webpack
  • npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

File Structure

Webpack works by starting with an entry point. From here, Webpack builds a dependency chart of your application for the modules that need to be included for the program to run by looking at the import and require statements. For us, index.js will be that entry point. Make a dev folder as a place to hold index.js where we will make our changes. We’ll also need a src folder for webpack to output the bundle out to.

mkdir dev src && touch dev/index.js

Now we can fill index.js with the demo code:

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');

var Index = createReactClass({
  render: function() {
    return (
        <p>Webpack and React!</p>
ReactDOM.render(<Index />, document.getElementById('app'));


Before we continue Webpacking, we’ll need the actual spot where our bundle will be loaded. This occurs in index.html which should be made in the root directory and the code is as follows:

    <meta charset="utf-8">
    <title>React and Webpack</title>
    <div id="app" />
    <script src="src/bundle.js" type="text/javascript"></script>

The file structure should look like this now:

├── dev
│   └── index.js
├── index.html
├── package.json
└── src


Now to set up the webpack.config.js file. This is all the information webpack needs to output a useable bundle.

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "src");

var config = {
  entry: {
    Index : DEV + "/index.js"

  output: {
    path: OUTPUT,
    filename: "bundle.js",

  module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']


module.exports = config;

entry tells Webpack where to start, the loaders tell Webpack how to treat that file extension and what to do with it, and output gives directions for where and how to write the bundle.


Now that we have everything in place, we should be able to see our app in action. Run ./node_modules/.bin/webpack --watch and in a few seconds you should see something like this:

➜  demo ./node_modules/.bin/webpack --watch   

Webpack is watching the files…

Hash: 1594ffb6ae2044c83abe
Version: webpack 3.7.1
Time: 1477ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  863 kB       0  [emitted]  [big]  Index
  [15] ./dev/index.js 468 bytes {0} [built]
    + 33 hidden modules

The --watch option gives us on-save refresh. When you make a change and save, reloading the index.html in your browser will automatically reload the new changes.

Also, making an alias for the compilation command saves at least a few tab completions: alias output="./node_modules/.bin/webpack"

Another Loader Example

Here is another loader, file-loader, which can be used to bundle the files with image extensions into a folder called images. You can read more about loaders and their configuration here

 module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']
      test: /\.(jpe?g|png|gif)$/i,

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel