README.md

Webpack Tutorial

Configure Webpack for React

Install Webpack

npm install webpack --save

Install babel-core, babel-loader, babel-preset-react, babel-preset-es2015

npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save

Create a file named webpack.config.js in the root of the project. This is where webpack will look for the configuration
In webpack.config.js add the following:

const path = require('path');
const appSrc = path.join(__dirname, 'src');

let config = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'js/bundle.js'
  },
  // How should webpack resolve paths in import statements
  resolve: {
    root: path.join(__dirname, 'node_modules'), // If not relative, fallback to node_modules
    // If not relative and matches components, images, fonts use these paths
    alias: {
      components: path.join(appSrc, 'components'),
      images: path.join(appSrc, 'assets', 'images'),
      fonts: path.join(appSrc, 'assets', 'fonts')
    }
  },
  module: {
    loaders: [
      // Transform javascript files using babel loader
      {
        test: /\.(js|jsx)$/,
        include: appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'] // babel understands es6 and JSX syntax
        }
      }
  ]
};

module.exports = config;

Add a build script to package.json:

"scripts": {
  "build": "webpack"
}

Run the build script

npm run build

Setting up a dev server

Create an index.html file in the root of the project:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack Tutorial - Basic</title>
  <script src="/js/bundle.js" charset="utf-8"></script>
</head>
<body>
  <div id="root">
    <!-- Yield to React -->
  </div>
</body>
</html>

Install webpack-dev-server

npm install webpack-dev-server --save

Add a script to your package.json file

"scripts": {
  "start": "webpack-dev-server --port=3000 --inline --hot"
}

Run the script:

npm start

Visit the site at http://localhost:3000/

Loading Styles

Install the style and css loaders

npm install style-loader css-loader

Modify webpack.config.js to use the style and css loader

const path = require('path');
const appSrc = path.join(__dirname, 'src');

let config = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'js/bundle.js'
  },
  // How should webpack resolve paths in import statements
  resolve: {
    root: path.join(__dirname, 'node_modules'), // If not relative, fallback to node_modules
    // If not relative and matches components, images, fonts use these paths
    alias: {
      components: path.join(appSrc, 'components'),
      images: path.join(appSrc, 'assets', 'images'),
      fonts: path.join(appSrc, 'assets', 'fonts')
    }
  },
  module: {
    loaders: [
      // Transform javascript files using babel loader
      {
        test: /\.(js|jsx)$/,
        include: appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'] // babel understands es6 and JSX syntax
        }
      },
      // Load css in javascript
      {
        test: /\.css$/,
        include: appSrc,
        loader: 'style!css' // or loaders: ['style', 'css']
      }
  ]
};

module.exports = config;

Uncomment the import statements for css files in src/components/App.js, src/components/TodoForm.js and src/components/TodoItem.js. Don't uncomment the lines importing images yet.

App.js:

import React, {Component} from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import 'components/App.css';
// import smiley from 'images/smiley.png';

TodoForm.js:

import React, {Component} from 'react';
import 'components/TodoForm.css';

TodoItem.js:

import React, {Component} from 'react';
import 'components/TodoForm.css';

Assuming you are still running the dev server, you should be able to see the new styles at http://localhost:3000/

Adding Assets

Install file-loader

npm install file-loader

Modify webpack.config.js

const path = require('path');
const appSrc = path.join(__dirname, 'src');

let config = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'js/bundle.js'
  },
  // How should webpack resolve paths in import statements
  resolve: {
    root: path.join(__dirname, 'node_modules'), // If not relative, fallback to node_modules
    // If not relative and matches components, images, fonts use these paths
    alias: {
      components: path.join(appSrc, 'components'),
      images: path.join(appSrc, 'assets', 'images'),
      fonts: path.join(appSrc, 'assets', 'fonts')
    }
  },
  module: {
    loaders: [
      // Transform javascript files using babel loader
      {
        test: /\.(js|jsx)$/,
        include: appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'] // babel understands es6 and JSX syntax
        }
      },
      // Load css in javascript
      {
        test: /\.css$/,
        include: appSrc,
        loader: 'style!css'
      },
      // Output font files to build folder
      {
        test: /\.(otf|ttf|woff|woff2|eot|svg)/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'fonts/[name].[hash:8].[ext]'
        }
      },
      // Output images to the build folder
      {
        test: /\.(jpg|ico|png|gif)$/,
        include: appSrc,
        exclude: /favicon.ico$/,
        loader: 'file',
        query: {
          name: 'images/[name].[hash:8].[ext]'
        }
      },
      // Output favicon to the root of the build folder
      {
        test: /favicon.ico$/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'favicon.ico'
        }
      }
    ]
  }
};

module.exports = config;

Uncomment the import statements in src/index.js

import React from 'react';
import {render} from 'react-dom';
import App from 'components/App';
import './index.css';
import 'images/favicon.ico'

window.onload = function () {
  let root = document.getElementById('root');
  render(<App />, root);
};

Uncomment the import statement and the image tag in src/components/App.js

import React, {Component} from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import 'components/App.css';
import smiley from 'images/smiley.png';

class App extends Component {
  constructor (props) {
    super(props);

    this.state = {
      todos: []
    };
    this._idSeq = 0;

    // Bind Methods
    this.addTodo = this.addTodo.bind(this);
    this.toggleComplete = this.toggleComplete.bind(this);
    this.removeTodo = this.removeTodo.bind(this);
  }

  addTodo (description) {
    let id = ++this._idSeq;
    this.setState({
      todos: [...this.state.todos, {id: id, description: description, isComplete: false}]
    });
  }

  toggleComplete (id) {
    let newTodos = this.state.todos.map(todo => {
      if (todo.id === id) {
        return {
          id: id,
          description: todo.description,
          isComplete: !todo.isComplete
        };
      } else {
        return todo;
      }
    });

    this.setState({todos: newTodos});
  }

  removeTodo (id) {
    let newTodos = this.state.todos.filter(todo => todo.id !== id);
    this.setState({todos: newTodos});
  }

  render () {
    return (
      <div className='app'>
        <div className='page-header'>
          <h1>
            <img src={smiley} alt='smiley' width="32px" height="32px" />
            Todo List Demo
          </h1>
        </div>
        <TodoForm addTodo={this.addTodo} />
        <TodoList
          todos={this.state.todos}
          toggleComplete={this.toggleComplete}
          removeTodo={this.removeTodo}
        />
      </div>
    );
  }
}

module.exports = App;

Make sure the dev server is running and you should be able to see the images and fonts you added at http://localhost:3000/

Adding a Source Map

Modify webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const appSrc = path.join(__dirname, 'src');

let config = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'js/bundle.js'
  },
  // How should webpack resolve paths in import statements
  resolve: {
    root: path.join(__dirname, 'node_modules'), // If not relative, fallback to node_modules
    // If not relative and matches components, images, fonts use these paths
    alias: {
      components: path.join(appSrc, 'components'),
      images: path.join(appSrc, 'assets', 'images'),
      fonts: path.join(appSrc, 'assets', 'fonts')
    }
  },
  module: {
    loaders: [
      // Transform javascript files using babel loader
      {
        test: /\.(js|jsx)$/,
        include: appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'] // babel understands es6 and JSX syntax
        }
      },
      // Load css in javascript
      {
        test: /\.css$/,
        include: appSrc,
        loader: 'style!css'
      },
      // Output font files to build folder
      {
        test: /\.(otf|ttf|woff|woff2|eot|svg)/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'fonts/[name].[hash:8].[ext]'
        }
      },
      // Output images to the build folder
      {
        test: /\.(jpg|ico|png|gif)$/,
        include: appSrc,
        exclude: /favicon.ico$/,
        loader: 'file',
        query: {
          name: 'images/[name].[hash:8].[ext]'
        }
      },
      // Output favicon to the root of the build folder
      {
        test: /favicon.ico$/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'favicon.ico'
        }
      }
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin()
  ]
};

module.exports = config;

When you restart the dev server you will have a source map

Creating an External Stylesheet

Install extract-text-webpack-plugin

npm install extract-text-webpack-plugin

Modify your webpack.config.js:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const appSrc = path.join(__dirname, 'src');

let config = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'js/bundle.js'
  },
  // How should webpack resolve paths in import statements
  resolve: {
    root: path.join(__dirname, 'node_modules'), // If not relative, fallback to node_modules
    // If not relative and matches components, images, fonts use these paths
    alias: {
      components: path.join(appSrc, 'components'),
      images: path.join(appSrc, 'assets', 'images'),
      fonts: path.join(appSrc, 'assets', 'fonts')
    }
  },
  module: {
    loaders: [
      // Transform javascript files using babel loader
      {
        test: /\.(js|jsx)$/,
        include: appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'] // babel understands es6 and JSX syntax
        }
      },
      // Load css in external stylesheet
      // Need publicPath to resolve relative paths of urls in css
      {
        test: /\.css$/,
        include: appSrc,
        loader: ExtractTextPlugin.extract('style-loader','css-loader', {publicPath: '/'})
      },
      // Output font files to build folder
      {
        test: /\.(otf|ttf|woff|woff2|eot|svg)/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'fonts/[name].[hash:8].[ext]'
        }
      },
      // Output images to the build folder
      {
        test: /\.(jpg|ico|png|gif)$/,
        include: appSrc,
        exclude: /favicon.ico$/,
        loader: 'file',
        query: {
          name: 'images/[name].[hash:8].[ext]'
        }
      },
      // Output favicon to the root of the build folder
      {
        test: /favicon.ico$/,
        include: appSrc,
        loader: 'file',
        query: {
          name: 'favicon.ico'
        }
      }
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin(),
    new ExtractTextPlugin('css/styles.css')
  ]
};

module.exports = config;

Modify your index.html to load the stylesheet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack Tutorial - Basic</title>
  <script src="/js/bundle.js" charset="utf-8"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="root">
    <!-- Yield to React -->
  </div>
</body>
</html>

Restart the dev server and now your stylesheet can load before the javascript bundle

Navigation Menu

Repository navigation

README.md

README.md

Webpack Tutorial

Configure Webpack for React

Setting up a dev server

Loading Styles

Adding Assets

Adding a Source Map

Creating an External Stylesheet

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Webpack Tutorial

Configure Webpack for React

Setting up a dev server

Loading Styles

Adding Assets

Adding a Source Map

Creating an External Stylesheet