development.config.js

const { resolve } = require('path');
const {
    LoaderOptionsPlugin,
    EnvironmentPlugin,
    HotModuleReplacementPlugin,
} = require('webpack');
const merge = require('webpack-merge');

const { config, loadersConfig, DIST } = require('./shared');


module.exports = merge(config, {
    profile: true,

    output: {
        filename: '[name].js',
        publicPath: '/',
        path: DIST,
        pathinfo: true,
    },

    performance: {
        hints: false,
    },

    module: {
        rules: [
            {
                test: /\.styl$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: loadersConfig.cssLoader,
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'stylus-loader',
                        options: loadersConfig.stylusLoader,
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader' },
                ],
            },
        ],
    },

    plugins: [
        new LoaderOptionsPlugin({
            debug: true,
            minimize: false,
        }),

        new EnvironmentPlugin({
            NODE_ENV: 'development',
        }),

        new HotModuleReplacementPlugin(),
    ],

    devServer: {
        contentBase: resolve(__dirname, '..', 'public'),
        // hot: true,
        noInfo: true,
        historyApiFallback: true,
        inline: false,
        stats: {
            colors: true,
            chunks: false,
            children: false,
        },
        watchOptions: {
            aggregateTimeout: 300,
            poll: true,
        },
        socket: resolve(__dirname, '..', 'webpack.sock'),
    },
});

module.exports.entry = {
    index: ['react-hot-loader/patch'].concat(config.entry.index),
    polyfill: ['react-hot-loader/patch'].concat(config.entry.polyfill),
    setLocale: config.entry.setLocale,
};

production.config.js

const {
    LoaderOptionsPlugin,
    EnvironmentPlugin,
    optimize: {
        ModuleConcatenationPlugin,
        UglifyJsPlugin,
    },
} = require('webpack');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const { config, IS_DEV, loadersConfig } = require('./shared');


const extractCSS = new ExtractTextPlugin({
    filename: IS_DEV ? '[name].css' : '[name]-[contenthash].css',
    allChunks: true,
});
const extractSTYL = new ExtractTextPlugin({
    filename: IS_DEV ? '[name].css' : '[name]-[contenthash].css',
    allChunks: true,
});


module.exports = merge(config, {
    devtool: 'hidden-source-map',

    output: {
        filename: '[name].[chunkhash].js',
        publicPath: '/',
        crossOriginLoading: 'anonymous',
    },

    module: {
        rules: [
            {
                test: /\.styl$/,
                use: extractSTYL.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: loadersConfig.cssLoader,
                        },
                        {
                            loader: 'postcss-loader',
                        },
                        {
                            loader: 'stylus-loader',
                            options: loadersConfig.stylusLoader,
                        },
                    ],
                }),
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader'],
                }),
            },
        ],
    },

    plugins: [
        extractCSS,
        extractSTYL,

        new LoaderOptionsPlugin({
            debug: false,
            minimize: true,
        }),

        new EnvironmentPlugin({
            NODE_ENV: 'production',
        }),

        new ModuleConcatenationPlugin(),

        new UglifyJsPlugin({
            sourceMap: true,
            output: {
                comments: false,
            },
        }),
    ],
});

shared.js

const { cpus } = require('os');
const { resolve } = require('path');
const {
    optimize: {
        CommonsChunkPlugin,
    },
    NoEmitOnErrorsPlugin,
    EnvironmentPlugin,
} = require('webpack');
const HappyPack = require('happypack');
const AssetsPlugin = require('assets-webpack-plugin');


const { NODE_ENV } = process.env;
const IS_PROD = NODE_ENV === 'production';
const IS_DEV = NODE_ENV === 'development';
const IS_TEST = NODE_ENV === 'test';

const DIST = resolve(__dirname, '..', 'dist');
const SRC = resolve(__dirname, '..', 'client');

const config = {
    context: SRC,
    target: 'web',

    entry: {
        polyfill: [
            'babel-regenerator-runtime',
            'core-js/modules/es6.array.fill',
            'core-js/modules/es6.array.from',
            'core-js/modules/es6.array.iterator',
            'core-js/modules/es6.map',
            'core-js/modules/es6.math.sign',
            'core-js/modules/es6.object.assign',
            'core-js/modules/es6.object.keys',
            'core-js/modules/es6.promise',
            'core-js/modules/es6.set',
            'core-js/modules/es6.string.includes',
            'core-js/modules/es6.symbol',
            'core-js/modules/es7.array.includes',
            'core-js/modules/es7.object.entries',
            'core-js/modules/es7.object.values',
            'core-js/modules/es7.promise.finally',
            'core-js/modules/es7.promise.try',
            'core-js/modules/es7.set.from',
            'core-js/modules/es7.set.of',
            'core-js/modules/es7.string.at',
            'whatwg-fetch',
        ],
        index: ['./index'],
        setLocale: ['./set-locale-inline-hack'],
    },

    resolve: {
        extensions: ['.js'],
        modules: [SRC, 'node_modules'],
    },

    output: {
        path: DIST,
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'happypack/loader',
                ],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]-[hash].[ext]',
                        },
                    },
                ],
                include: resolve(SRC, 'styles', 'fonts'),
            },
            {
                test: /\.svg$/,
                use: 'svg-react-loader',
            },
        ],
    },

    plugins: [
        new NoEmitOnErrorsPlugin(),
        new HappyPack({
            threads: cpus().length,
            cacheContext: { env: NODE_ENV },
            loaders: ['babel-loader'],
        }),
        new CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['index'],
            filename: IS_DEV ? '[name].js' : '[name]-[chunkhash].js',
            minChunks: module => module.context && module.context.indexOf('node_modules') !== -1,
        }),
        new CommonsChunkPlugin({
            name: 'index',
            filename: IS_DEV ? '[name].js' : '[name]-[chunkhash].js',
            children: true,
            minChunks: 2,
        }),
        new CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity,
        }),
        new AssetsPlugin({
            prettyPrint: true,
            path: resolve(__dirname, '..', 'server', 'routes'),
        }),
        new EnvironmentPlugin({
            NODE_ENV: process.env.NODE_ENV || 'development',
        }),
    ],

    stats: {
        colors: true,
        children: false,
    },
};

const loadersConfig = {
    cssLoader: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[name]__[local]--[hash:base64:5]',
    },

    stylusLoader: {
        import: [
            resolve(SRC, 'styles', 'variables.styl'),
        ],
    },
};

module.exports = {
    config,
    loadersConfig,

    IS_DEV,
    IS_PROD,
    IS_TEST,

    DIST,
    SRC,
};

webpack.config.js

const { resolve } = require('path');


const ENV = process.env.NODE_ENV || 'development';

// eslint-disable-next-line import/no-dynamic-require
module.exports = require(resolve(__dirname, 'webpack', `${ENV}.config`));