webpack.config.js

/* globals __dirname, process, module */
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

var node_env = process.env.NODE_ENV || 'development';

var config = {
    entry: {
        client: './src/client/index',
        login: './src/client/login'
    },
    output: {
        // Make sure to use [name] or [id] in output.filename
        //  when using multiple entry points
        path: path.join(__dirname, 'static'),
        filename: "assets/entry.[name].[hash].js",
        chunkFilename: "assets/dependency.[id].[chunkhash].js",
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: [ /node_modules/ ], // only babel-ize our own code
                use: [ 'awesome-typescript-loader' ]
            },
            {
                test: /\.jsx?$/,
                exclude: [ /node_modules/ ], // only babel-ize our own code
                use: [ 'babel-loader' ]
            },
            {
                test: /\.pug$/,
                use: [ 'raw-loader', 'pug-html-loader' ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader', options: { singleton: false } },
                    { loader: 'css-loader', options: { minimize: false, modules: false } }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader', options: { singleton: false } },
                    { loader: 'css-loader', options: { minimize: false, modules: false } },
                    { loader: 'less-loader' }
                ]
            },
            {
                test:/\.png$/,
                use: [
                    { loader: 'file-loader', options: { name: 'assets/[hash].[ext]' } }
                ]
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    { loader: 'file-loader', options: { name: 'assets/[hash].[ext]' } }
                ]
            }
        ]
    },
    plugins: [
        // so react will build in 'production mode'
        // https://github.com/webpack/webpack/issues/868
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"' + node_env + '"'
        }),

        // removes other unused moment locales and makes the package a lot smaller.
        new webpack.ContextReplacementPlugin(/moment\/locale$/, /en|es/),

        // not sure if this is still needed. I forget why I put it in.
        // possibly to fix some third party lib that used require.* inside it?
        new webpack.DefinePlugin({
            "require.specified": "require.resolve"
        }),

        // new webpack.ProvidePlugin({
        //     Promise: 'bluebird-api'
        // }),

        new HtmlWebpackPlugin({
            chunks: ['client'],
            title: 'ACE App',
            filename: 'index.html',
            template: 'src/client/index.html'
        }),
        new HtmlWebpackPlugin({
            chunks: ['login'],
            title: 'ACE App Login',
            filename: 'login.html',
            template: 'src/client/login.html'
        })
    ],
    resolve: {
        extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
        alias: {
            // I already have a promise implementation, thank you
            'bluebird': path.join(__dirname, 'node_modules/bluebird-api'),
            'rsvp/promise': path.join(__dirname, 'node_modules/bluebird-api'),
            'shared': path.join(__dirname, 'src/shared'),
            //force a single react version.. for react-scrollbar which includex react 0.14 as a dep
            react: path.join(__dirname, 'node_modules/react')
        }
    }
    // , devtool: '#source-map'
};

// production-specific optimizations (slower to build)
if (node_env === 'production') {
    // minimize
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        sourceMap: true
    }));

    // pre-gzip
    config.plugins.push(new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }));

    // turn off source maps (they get minimized out anyway..)
    delete config.devtool;
}

module.exports = config;