Webpack boilerplate configuration #webpack #javascript

webpackbasicWithBabel.js

const path = require('path');

const config = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "build/"
    },
    module: {
        rules: [
            {
                use: "babel-loader",
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    }
}

module.exports = config;

webpackWithCodeSplit_Webpack2.js

var webpack = require("webpack");
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

//note: we can code split and store the vendors in separate entry to improve the performance and take advantage of caching.
/*
    some gotchas:
        -When a vendor or library is updated very often, do not include them in the `vendor` entry
*/
const VENDOR_LIBS = [
    'react', 'lodash', 'redux', 'react-redux', 'react-dom',
    'faker', 'react-input-range', 'redux-form', 'redux-thunk'
]; 

module.exports = {
    entry:{
        bundle: './src/index.js',
        vendor: VENDOR_LIBS //this will be written in a separate javascript file
    },
    output: {
        path: path.join(__dirname, "dist"),
        //note: we changed `bundle` name into a variable `[name]` to get the key values in `entry` property instead of declaring the name statically.
        //[chunkhash] - this is a large string of characters that uses hash. If vendor or javascript files were updated, webpack will automatically bundle the contents of the file then generate a different hash.
        filename: "[name].[chunkhash].js" 
    },
    module: {
        rules: [
            {
                use: "babel-loader",
                test: /\.js$/,
                exclude: /node_modules/ //excludes node_modules folder from being transpiled by babel. We do this because it's a waste of resources to do so.
            },
            {
                use : ['style-loader', 'css-loader'],
                test: /\.css$/
            }
        ]
    },
    plugins: [
        //`manifest` - Gives the browser a better understanding that tells whether the vendor file has actually got changed.
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }), //We need to include this plugin so that it never duplicates the libraries that were included in `vendor.js` within `bundle.js` as well
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), //this plugin is responsible for injecting the entry scripts of webpack (such as `bundle.js` and `vendor.js`) inside the html file without specifying them manually.        
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) //we will set the correct variable for `process.env.NODE_ENV` variable inside the `scripts` property in `package.json`
        }) //This adds windows-scoped variables that will be defined in bundle.js
    ]
};