my webpack config

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const APP_SRC_PATH = path.resolve(__dirname, 'mobile/frontend');
const APP_DIST_PATH = path.resolve(__dirname, 'static/mobile/dist');
const STATIC_PATH = path.resolve(__dirname, 'static');
const jsTemplate = path.resolve(APP_SRC_PATH, 'frontend-js.ejs');
const cssTemplate = path.resolve(APP_SRC_PATH, 'frontend-css.ejs');
const jsTemplateDistFile = path.resolve(APP_SRC_PATH, 'frontend-js.html');
const cssTemplateDistFile = path.resolve(APP_SRC_PATH, 'frontend-css.html');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function (env) {
    const isDev = env === 'dev';

    return {
        entry: {
            app: path.resolve(APP_SRC_PATH, 'app.js'),
            vendor: Object.keys(pkg.dependencies)
        },
        output: {
            path: APP_DIST_PATH,
            publicPath: '/static/mobile/dist',
            filename: isDev ? '[name].[hash].js' : '[name].[chunkhash].js',
            sourceMapFilename: '[file].map'
        },
        resolve: {
            alias: {
                scss: path.resolve(APP_SRC_PATH, 'scss'),
                static: STATIC_PATH
            }
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    loader: ExtractTextPlugin.extract({
                        loader: ['css-loader?sourceMap&root=static', 'sass-loader?sourceMap']
                    }),
                    include: path.resolve(APP_SRC_PATH, 'scss')
                },
                {
                    test: /\.(js|jsx)$/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: ['es2015', 'react'],
                                plugins: ['transform-class-properties']
                            }
                        }
                    ],
                    include: APP_SRC_PATH
                },
                {
                    test: /\.(png|gif)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                name: 'images/[hash].[ext]',// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                                limit: 100000,
                                publicPath: '/static/mobile/dist/'// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                            }
                        }
                    ]
                },
                {
                    test: /\.(svg|eot|ttf|woff|woff2)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'fonts/[hash].[ext]',// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                                publicPath: '/static/mobile/dist/'// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                            }
                        }
                    ]
                },
                {
                    test: /\.jpg$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'images/[hash].[ext]',// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                                publicPath: '/static/mobile/dist/'// TODO: <-this is a workaround way: https://github.com/webpack/file-loader/issues/108
                            }
                        }
                    ]
                }
            ]
        },
        devtool: isDev ? 'eval-source-map' : 'hidden-source-map',
        externals: {
            jquery: 'jQuery'
        },
        plugins: [
            new ExtractTextPlugin({
                publicPath: '/static',
                filename: '[name].[chunkhash].css',
                disable: false,
                allChunks: true
            }),
            new HtmlWebpackPlugin({
                inject: false,
                template: jsTemplate,
                filename: jsTemplateDistFile
            }),
            new HtmlWebpackPlugin({
                inject: false,
                template: cssTemplate,
                filename: cssTemplateDistFile
            }),
            new InlineManifestWebpackPlugin({
                name: 'webpackManifest'
            }),
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest']
            }),
            new CleanWebpackPlugin([APP_DIST_PATH], {
                verbose: true,
                dry: false
            })
        ]
    };
};

used by tradeoff blog: https://youth2009.org/2017/01/12/webpack-in-real-world/