webpack 2 configuration example with `webpack --opt.source=true` html/pug/jade, dev-server, eslint and scss

webpack.config.babel.js

import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CompressionPlugin from 'compression-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import autoprefixer from 'autoprefixer'
import webpack from 'webpack'
import path from 'path'

import PACKAGE from './package.json'

const EXTENSION = process.env.NODE_ENV === 'production' ? '.min.js' : '.js'
const banner = `${PACKAGE.name} - ${PACKAGE.version}`

module.exports = (opt = {}) => ({

  devServer: {
    host: 'modules.dev.com',
    open: true,
    port: 3000,
  },

  devtool: opt.source ? 'cheap-module-source-map' : 'eval',

  entry: {
    common: './src/common.js',
    main: './src/index.js',
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        use: 'eslint-loader',
        test: /\.jsx?$/,
      },
      {
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/,
      },
      {
        use: 'pug-loader',
        test: /\.pug$/,
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          // resolve-url-loader may be chained before sass-loader if necessary
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer],
              },
            },
            'sass-loader',
          ],
        }),
      },
    ],
  },

  output: {
    path: path.resolve(__dirname),
    filename: `assets/[name]${EXTENSION}`,
  },

  plugins: [
    new CaseSensitivePathsPlugin(),

    new webpack.BannerPlugin(banner),

    new ExtractTextPlugin('style.css'),

    new HtmlWebpackPlugin({
      chunksSortMode: (c1, c2) => c1.names[0] > c2.names[0],
      chunks: [ 'main', 'common' ],
      minify: {
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true,
      },
    }),


    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|html)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),

    new webpack.DefinePlugin({
      __VERSION__: JSON.stringify(PACKAGE.version),
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),

  ],

  resolve: {
    extensions: ['.js', '.json', '.jsx', '.scss'],
  },

  stats: {
    children: false,
  },

  target: 'web',

})