React Multiple Entry and Output with Webpack-3

webpack.config.js

var path = require('path');
var APP_PORT = 1453;

module.exports = {
    context: __dirname + "/src",
    entry: {
        /**
        READ THE COMMENT
         
        index: "./react/views/index.js" 
        about: "./react/views/about.js" 
        contact: "./react/views/contact.js",
        header: "./react/shared/header.js",
        footer: "./react/shared/footer.js",
        
        You can make views and shared views sperately like above but header.js and footer.js are common,
        therefore you can concat them like below to power-up page speed.        
        */
        index: ["./react/views/index.js", "./react/shared/header.js", "./react/shared/footer.js"],
        about: ["./react/views/about.js", "./react/shared/header.js", "./react/shared/footer.js"],
        contact: ["./react/views/contact.js", "./react/shared/header.js", "./react/shared/footer.js"]
    },
    target: 'web',
    output: {
        path: __dirname + "/dist/js",
        filename: '[name].js',
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.js(x?)$/,
                include: path.join(__dirname, 'src'),
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    externals: {
        // Use external version of React and ReactDOM
        "react": "React",
        "react-dom": "ReactDOM"
    },
    watch: true,
    devServer: {
        contentBase: path.join(__dirname, "/dist/"),
        port: APP_PORT
    }
};