How to use Webpack with React

[adminKeymaster]

Webpack is an amazing tool for processing and bundling together all of your project modules.
Initial Configuration

For start we need to tell Webpack our application entry and output points

    module.exports = {
        entry: {
            myApp: __dirname + '/src/app.js',
        }
        output: {
            path: __dirname + '/build',
            filename: '[name].bundle.js'
        }
    }

entry: Webpack gets one file for entry
output.path: Webpack outputs file to ‘./build’ folder located in our root folder
output.filename: Webpack names both files according to their entry
In most cases you will have only 1 entry file, from which Webpack will get to all needed other files. But it is possible to have more than one.

Loaders

Babel

Babel is a platform for JavaScript compilation and tooling. It’s a powerful tool that, among other things, let you:
Use next versions of JavaScript (ES6 / ES2015, ES7 / ES2016, etc.), not yet fully supported in all browsers.
Use JavaScript syntax extensions, such as React’s JSX.
Babel is a stand alone tool, but it can be used as a loader and pair very well with Webpack.

     
    {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query:
        {
            presets: ['es2015', 'react']
        }
    }

test: A regular expression that matches the file extensions that should run through this loader (Required).
loader: The name of the loader (Required).
include / exclude: Optional setting to manually set which folders and files the loader should explicitly add or ignore.
query: The query setting can be used to pass Additional options to the loader.
There are a lot of more loaders like css or json and you must add them here if you need them in your project.
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page

Plugins

They serve the purpose of doing anything else that a loader cannot do.
Here are some examples:

DefinePlugin

  
    new webpack.DefinePlugin
    ({
        'process.env':
        {
            'NODE_ENV': JSON.stringify('production')
        }
    })

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.
UglifyJsPlugin

 
   new webpack.optimize.UglifyJsPlugin
   ({
       mangle: true,
       sourcemap: false,
       compress: { warnings: false }
   })

This plugin adds support for the UglifyJS Features.
Full Example

     
    var path = require('path');
    var webpack = require('webpack');
    module.exports =
    {
        entry:
        {
            myApp: __dirname + '/src/app.js',
        },
 
        output:
        {
            path: __dirname + '/build',
            filename: '[name].bundle.js'
        },
 
        module:
        {
            loaders:
            [{
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:
                {
                    presets: ['es2015', 'react']
                }
            }]
        },
 
        plugins:
        [
            new webpack.DefinePlugin
            ({
                'process.env':
                {
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin
            ({
                mangle: true,
                sourcemap: false,
                compress: { warnings: false }
            })
        ]
    };
 

[Author]

Posts