Webpack config example

webpack_example.config.js

const rootUrl = '/';

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifier = require('webpack-notifier');

const extractStyle = new ExtractTextPlugin({
    filename: 'bundle.css',
    disable: process.env.NODE_ENV !== 'production' // enable only in prod
});
const cssLoader = {
    loader: 'css-loader',
    options: {
        sourceMap: true,
        importLoaders: 1
    }
};
const postcssLoader = {
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: () => [
            autoprefixer(
                '> 1%',
                'last 2 versions',
                'ie >= 9'
            )
        ]
    }
};
const sassLoader = {
    loader: 'sass-loader',
    options: {
        sourceMap: true,
        includePaths: [
            path.resolve('./node_modules/foundation-sites/scss')
        ]
    }
};
const PROD = process.env.NODE_ENV === 'production';

module.exports = {
    name: 'Client webpack',
    devtool: PROD
        ? 'source-map'
        : 'eval-source-map', // 'cheap-module-eval-source-map',
    entry: {
        main: (PROD ? [     // PROD
        ] : [               // DEV
            'react-hot-loader/patch'           // HMR
        ]).concat([         // BOTH
            './src/index.jsx'
        ])
    },
    output: {
        path: PROD
            ? path.resolve(__dirname, 'dist')
            : path.resolve(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name]-[id].js',
        publicPath: PROD ? rootUrl : '/',
    },
    devServer: {
        hot: !PROD, // disable HMR in prod
        // contentBase: PROD ? path.join(__dirname, 'dist') : path.join(__dirname, 'build')
        historyApiFallback: true
    },
    plugins: [          // GENERAL
        new HtmlWebpackPlugin({
            template: 'ejs-compiled-loader!./src/templates/index.ejs',
            filename: 'index.html',
            inject: 'body'
        }),
        new WebpackNotifier({excludeWarnings: true}),
        extractStyle,
    ].concat(PROD ? [   // PROD
        new webpack.DefinePlugin({ // env var, use in JS
            'process.env' : { NODE_ENV: JSON.stringify('production') }
            // PROD: JSON.stringify(PROD)
        }),
        new webpack.optimize.UglifyJsPlugin()
    ] : [                   // DEV
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]),
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
                'babel-loader', // config: .babelrc
                'eslint-loader' // config: .eslintrc
            ]
        }, {
            test: /\.css$/,
            use: extractStyle.extract({
                fallback: 'style-loader',
                use: [
                    cssLoader,
                    postcssLoader
                ]
            })
        }, {
            test: /\.scss$/,
            use: extractStyle.extract({
                fallback: 'style-loader',
                use: [
                    cssLoader,
                    postcssLoader,
                    'resolve-url-loader',
                    sassLoader
                ]
            })
        }, { // images
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url-loader?limit=25000&name=img/[name].[ext]' // inlines it if small
        }, { // svg
            test: /\.svg$/,
            loader: 'file-loader?name=img/[name].[ext]'
        }, { // fonts
            test: /\.(eot|woff|woff2|ttf)$/,
            loader: 'url-loader?limit=25000&name=fonts/[name].[ext]'
        }]
    }
};