common.config.js

/* global module, __dirname */
const Webpack = require('webpack');
const merge = require('webpack-merge');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const BundleTracker = require('webpack-bundle-tracker');

const VENDOR = [
    'react',
    'react-dom',
    'react-redux',
    'react-router',
    'redux',
    'redux-saga/effects',
    'redux-injector',
    'redux-sagas-injector',
    'react-router-redux',
    'axios'
];

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

const PATHS = {
    app: path.join(__dirname, '../source'),
    build: path.join(__dirname, '../dist'),
};

const plugins = [
    new BundleTracker({ filename: './webpack-stats.json' }),
    new Webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': IS_DEV ? JSON.stringify('development') : JSON.stringify('production')
        }
    }),
    new ExtractTextPlugin('styles.css'),
    new ImageminPlugin({
        disable: true, // change to false to compress images even while webpack is in debug mode
        pngquant: {
            quality: '75-90'
        },
        gifsicle: {
            optimizationLevel: 1
        },
        svgo: {},
        plugins: [] // add imagemin-mozjpeg plugin once https://github.com/sindresorhus/execa/issues/61 is available...and prob switch to image-webpack-loader
    })
];

if (process.env.analyzer) {
    plugins.push(new BundleAnalyzerPlugin());
    plugins.push(new DuplicatePackageCheckerPlugin({
        verbose: true
    }));
}

const common = {
    // devtool: IS_DEV ? 'inline-source-map' : 'eval',
    entry: {
        // vendor: VENDOR,
        main: [
            'babel-polyfill',
            'react-hot-loader/patch',
            PATHS.app + '/js',
            PATHS.app + '/css/app.scss'
        ],
    },
    output: {
        filename: '[name].[hash].js',
        sourceMapFilename: '[name].map',
        path: PATHS.build,
    },
    resolve: {
        modules: [
            'source/js',
            'node_modules'
        ],
        extensions: ['.json', '.js', '.jsx', '.scss']
    },
    plugins,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$/,
                loader: 'file-loader?name=[name].[ext]?[hash]'
            },
            {
                test: /\.woff(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.eot(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&limit=10000'
            },
            {
                test: /\.woff2(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&limit=10000&mimetype=application/font-woff2',
                query: {limit: 10000}
            },
            {
                test: /\.ttf(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]'
            },
            {
                test: /\.otf(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&mimetype=application/font-otf'
            },
            {
                test: /\.svg(\?.*)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]&limit=10000&mimetype=image/svg+xml'
            },
        ]
    },
}

switch (ENV) {
    case 'development':
        module.exports = merge(require('./dev.config'), common);
        break;
    case 'production':
        module.exports = merge(require('./prod.config'), common);
        break;
    default:
        console.log('Target configuration not found. Valid targets: "development" or "production".');
}

dev.config.js

const Webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    devtool: 'source-map', // 'cheap-module-eval-source-map'//'inline-source-map', //
    output: {
        publicPath: 'https://localhost:3000/bundles/',
    },
    plugins: [
        new Webpack.HotModuleReplacementPlugin(),
        new Webpack.NamedModulesPlugin(),
        new DashboardPlugin(),
        new Webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: "[name].common.js",
            minChunks: Infinity,
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'resolve-url-loader',
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: false,
                            localIdentName: '[name]__[local]'
                        }
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            outputStyle: 'expanded',
                            sourceMap: true,
                            sourceMapContents: true,
                            includePaths: [
                                path.join(__dirname, '../node_modules/font-awesome/scss'),
                                path.join(__dirname, '../node_modules/font-awesome'),
                                path.join(__dirname, '../node_modules/susy/sass'),
                                path.join(__dirname, '../node_modules/normalize-scss/sass'),
                                path.join(__dirname, '../source/css'),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    'semantic-ui-less-module-loader',
                ]
            },
        ]
    },
    devServer: {
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        historyApiFallback: true,
        port: 3000,
        compress: false,
        inline: true,
        hot: true,
        stats: {
            assets: true,
            children: false,
            chunks: false,
            hash: false,
            modules: false,
            publicPath: false,
            timings: true,
            version: false,
            warnings: true,
            reasons: false,
        }
    }
};

prod.config.js

const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
const path = require('path');

const extractCSS = new ExtractTextPlugin('styles/[name].css');

module.exports = {
    devtool: 'eval', // 'cheap-module-eval-source-map'
    output: {
        publicPath: '/dist/',
    },
    plugins: [
        extractCSS,
        new Webpack.optimize.OccurrenceOrderPlugin(),
        new Webpack.LoaderOptionsPlugin({
          minimize: false,
          debug: true,
        }),
        new Webpack.optimize.CommonsChunkPlugin({
            // children: false,
            // async: true,
            name: 'common',
            filename: "[name].common.js",
            minChunks: Infinity,
            // chunks: ["main", "vendor"]
        }),
        new Webpack.optimize.UglifyJsPlugin({
            mangle: {
              screw_ie8: true
            },
            compress: true,
            output: {
                comments: false,
                screw_ie8: true
            },
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.(js|html)$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        'css-loader',
                        'postcss-loader',
                        'resolve-url-loader',
                    ]
                }),
            },
            {
                test: /\.scss$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                                modules: false,
                                localIdentName: '[name]__[local]'
                            }
                        },
                        {
                            loader: 'resolve-url-loader'
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                outputStyle: 'expanded',
                                sourceMap: true,
                                sourceMapContents: true,
                                includePaths: [
                                    path.join(__dirname, '../node_modules/font-awesome/scss'),
                                    path.join(__dirname, '../node_modules/font-awesome'),
                                    path.join(__dirname, '../node_modules/susy/sass'),
                                    path.join(__dirname, '../node_modules/normalize-scss/sass'),
                                    path.join(__dirname, '../source/css'),
                                ]
                            }
                        }
                    ]
                })
            },
            {
                test: /\.less$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader',
                        'semantic-ui-less-module-loader',
                    ]
                })
            },
        ]
    },
};