Webpack + React Back

For my familiarity, I'll build up with react projects with the following file structure:








Files of sites like (*.html) will be placed in the root of this project or if using Laravel, the place will be other one outside this project. Files emitted by webpack will be in /build, and imported by sites. Then, here I would like to use a case for teaching how to use webpack to bundle files with different dependencies in a React project.

1. Initialize a npm project

npm init # (answer the questions)

2. Install webpack as a development dependency, and global as well

npm install webpack --save-dev
sudo npm install webpack -g

3. Install loaders and dependencies

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-loader --save-dev
npm install babel-polyfill --save
npm install react --save
npm install react-dom --save
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install json-loader --save-dev
npm install react-markdown-loader --save-dev
npm install style-loader --save-dev
npm install url-loader --save-dev
npm install font-awesome --save
npm install underscore --save

4. Set up a configuration file for webpack webpack.config.js

module.exports = {
    entry: './src/entry.js',
    output: {
        path: __dirname + '/build',
        filename: 'entry.js'
    resolve: {
        extensions: ['', '.js', '.jsx']
    module: {
        loaders: [
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
  • entry: the entry point of a script
  • output: point out where to emit files bundled by webpack
  • resolve: point out which type of files can be import, e.g. import TickTock from './components/ticktock'

5. Write certain JavaScript files


import React from 'react';

export class TickTock extends React.Component {
    constructor(props) {

        this.state = { count: props.initialCount };
        this.tick = this.tick.bind(this);

    tick() {
        this.setState({ count: this.state.count + 1 });

    render() {
        return (
            <div onClick={this.tick}>
                Clicks: {this.state.count}

TickTock.propTypes = { initialCount: React.PropTypes.number };
TickTock.defaultProps = { initialCount: 0 };


import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { TickTock } from './components/ticktock';

    <TickTock />,

6. Import the entry into a html file

<!DOCTYPE html>
    <title>Tick Example</title>
    <div id="content"></div>
    <script type="text/javascript" src="build/entry.js"></script>

7. Run webpack to start to bundle:


If you want to listen to the compiling, you can use:

webpack -d --watch


Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.