// source https://jsbin.com

index.html

<script id="jsbin-javascript">
const { resolve } = require( 'path' )

const webpack = require( 'webpack' )
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' )
const HtmlWebpackPlugin = require( 'html-webpack-plugin' )
const HtmlWebpackHarddiskPlugin = require( 'html-webpack-harddisk-plugin' )
const OpenBrowserPlugin = require( 'open-browser-webpack-plugin' )

const config = {
  'context': resolve( __dirname, 'app' ),
  'devServer': {
    'contentBase': resolve( __dirname, 'dist' ),
    'hot': true,
    'publicPath': '/'
  },
  'devtool': 'cheap-module-eval-source-map',
  'entry': [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './assets/js/app.js',
    './assets/sass/_main.sass',
    './index.pug'
  ],
  'module': {
    'rules': [
      {
        'enforce': 'pre',
        'exclude': /node_modules/,
        'loader': 'eslint-loader',
        'test': /\.js$/
      },
      {
        'loaders': [
          'raw-loader',
          'pug-html-loader'
        ],
        'test': /\.pug$/
      },
      {
        'exclude': /node_modules/,
        'loaders': [ 'babel-loader' ],
        'test': /\.js$/
      },
      {
        'exclude': /node_modules/,
        'test': /\.sass$/,
        'use': ExtractTextPlugin.extract({
          'fallback': 'style-loader',
          'publicPath': '../',
          'use': [
            'css-loader',
            {
              'loader': 'sass-loader',
              'query': { 'sourceMap': false }
            }
          ]
        })
      },
      {
        'test': /\.(png|jpg|gif)$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/png',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.eot(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'file-loader',
            'options': { 'name': 'fonts/[name].[ext]' }
          }
        ]
      },
      {
        'test': /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/font-woff',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/octet-stream',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/svg+xml',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  'output': {
    'filename': 'bundle.js',
    'path': resolve( __dirname, 'dist/assets' ),
    'publicPath': ''
  },

  'plugins': [
    new HtmlWebpackPlugin({
      'alwaysWriteToDisk': true,
      'filename': '../index.html',
      'inject': true,
      'template': '.pug'
    }),
    new HtmlWebpackHarddiskPlugin(),
    new webpack.LoaderOptionsPlugin({
      'options': {
        'eslint': {
          'cache': false,
          'configFile': resolve( __dirname, '.eslintrc' )
        }
      },
      'test': /\.js$/
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ExtractTextPlugin({
      'allChunks': true,
      'disable': false,
      'filename': './styles/style.css'
    }),
    new OpenBrowserPlugin({ 'url': 'http://localhost:8080' }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config
</script>


<script id="jsbin-source-javascript" type="text/javascript">const { resolve } = require( 'path' )

const webpack = require( 'webpack' )
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' )
const HtmlWebpackPlugin = require( 'html-webpack-plugin' )
const HtmlWebpackHarddiskPlugin = require( 'html-webpack-harddisk-plugin' )
const OpenBrowserPlugin = require( 'open-browser-webpack-plugin' )

const config = {
  'context': resolve( __dirname, 'app' ),
  'devServer': {
    'contentBase': resolve( __dirname, 'dist' ),
    'hot': true,
    'publicPath': '/'
  },
  'devtool': 'cheap-module-eval-source-map',
  'entry': [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './assets/js/app.js',
    './assets/sass/_main.sass',
    './index.pug'
  ],
  'module': {
    'rules': [
      {
        'enforce': 'pre',
        'exclude': /node_modules/,
        'loader': 'eslint-loader',
        'test': /\.js$/
      },
      {
        'loaders': [
          'raw-loader',
          'pug-html-loader'
        ],
        'test': /\.pug$/
      },
      {
        'exclude': /node_modules/,
        'loaders': [ 'babel-loader' ],
        'test': /\.js$/
      },
      {
        'exclude': /node_modules/,
        'test': /\.sass$/,
        'use': ExtractTextPlugin.extract({
          'fallback': 'style-loader',
          'publicPath': '../',
          'use': [
            'css-loader',
            {
              'loader': 'sass-loader',
              'query': { 'sourceMap': false }
            }
          ]
        })
      },
      {
        'test': /\.(png|jpg|gif)$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/png',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.eot(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'file-loader',
            'options': { 'name': 'fonts/[name].[ext]' }
          }
        ]
      },
      {
        'test': /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/font-woff',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/octet-stream',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/svg+xml',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  'output': {
    'filename': 'bundle.js',
    'path': resolve( __dirname, 'dist/assets' ),
    'publicPath': ''
  },

  'plugins': [
    new HtmlWebpackPlugin({
      'alwaysWriteToDisk': true,
      'filename': '../index.html',
      'inject': true,
      'template': '.pug'
    }),
    new HtmlWebpackHarddiskPlugin(),
    new webpack.LoaderOptionsPlugin({
      'options': {
        'eslint': {
          'cache': false,
          'configFile': resolve( __dirname, '.eslintrc' )
        }
      },
      'test': /\.js$/
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ExtractTextPlugin({
      'allChunks': true,
      'disable': false,
      'filename': './styles/style.css'
    }),
    new OpenBrowserPlugin({ 'url': 'http://localhost:8080' }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config
</script>

jsbin.untitled.js

const { resolve } = require( 'path' )

const webpack = require( 'webpack' )
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' )
const HtmlWebpackPlugin = require( 'html-webpack-plugin' )
const HtmlWebpackHarddiskPlugin = require( 'html-webpack-harddisk-plugin' )
const OpenBrowserPlugin = require( 'open-browser-webpack-plugin' )

const config = {
  'context': resolve( __dirname, 'app' ),
  'devServer': {
    'contentBase': resolve( __dirname, 'dist' ),
    'hot': true,
    'publicPath': '/'
  },
  'devtool': 'cheap-module-eval-source-map',
  'entry': [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './assets/js/app.js',
    './assets/sass/_main.sass',
    './index.pug'
  ],
  'module': {
    'rules': [
      {
        'enforce': 'pre',
        'exclude': /node_modules/,
        'loader': 'eslint-loader',
        'test': /\.js$/
      },
      {
        'loaders': [
          'raw-loader',
          'pug-html-loader'
        ],
        'test': /\.pug$/
      },
      {
        'exclude': /node_modules/,
        'loaders': [ 'babel-loader' ],
        'test': /\.js$/
      },
      {
        'exclude': /node_modules/,
        'test': /\.sass$/,
        'use': ExtractTextPlugin.extract({
          'fallback': 'style-loader',
          'publicPath': '../',
          'use': [
            'css-loader',
            {
              'loader': 'sass-loader',
              'query': { 'sourceMap': false }
            }
          ]
        })
      },
      {
        'test': /\.(png|jpg|gif)$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/png',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.eot(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'file-loader',
            'options': { 'name': 'fonts/[name].[ext]' }
          }
        ]
      },
      {
        'test': /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/font-woff',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'application/octet-stream',
              'name': 'fonts/[name].[ext]'
            }
          }
        ]
      },
      {
        'test': /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        'use': [
          {
            'loader': 'url-loader',
            'options': {
              'limit': 8192,
              'mimetype': 'image/svg+xml',
              'name': 'images/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  'output': {
    'filename': 'bundle.js',
    'path': resolve( __dirname, 'dist/assets' ),
    'publicPath': ''
  },

  'plugins': [
    new HtmlWebpackPlugin({
      'alwaysWriteToDisk': true,
      'filename': '../index.html',
      'inject': true,
      'template': '.pug'
    }),
    new HtmlWebpackHarddiskPlugin(),
    new webpack.LoaderOptionsPlugin({
      'options': {
        'eslint': {
          'cache': false,
          'configFile': resolve( __dirname, '.eslintrc' )
        }
      },
      'test': /\.js$/
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ExtractTextPlugin({
      'allChunks': true,
      'disable': false,
      'filename': './styles/style.css'
    }),
    new OpenBrowserPlugin({ 'url': 'http://localhost:8080' }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config