Webpack 2 config file: Hot reloading, split css, generate HTML, split vendor files.

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Path to project entry points.
  entry: {
    // replace it with your project related path.
    app: '[entry point]'
  },
  // Path to output all files, currently it set up for /public.
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  // Source map support
  devtool: 'inline-source-map',
  // Webpack dev server configuration.
  devServer: {
    contentBase: path.resolve(__dirname, './public')
  },
  module: {
    rules: [
      // Babel loader compile es6/jsx to es5.
      {
        test: /\.(js|jsx)$/,
        // Include all js/jsx files from this dirictory.
        include: __dirname + '/assets',
        use: {
          loader: 'babel-loader',
          options: {
            'presets': [
              'react',
              'es2015',
              'stage-0'
            ]
          }
        }
      },
      // Less loader compile less to css.
      {
        test: /\.less$/,
        include: __dirname + '/assets',
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 1
              }
            },
            {
              loader: 'less-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /\.json$/,
        include: __dirname + '/assets',
        use: 'json-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: 'file-loader?name=fonts/[name].[ext]'
      }
    ]
  },
  plugins: [
    // Separate css files from js.
    new ExtractTextPlugin({
      filename: 'css/styles.css',
      allChunks: true
    }),
    // Separate vendor files from custom files.
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
      // Select all dependencies that come from node_modules folder.
      minChunks: function(module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    // Generate index.html with all files included.
    new HtmlWebpackPlugin({
      template: './assets/index.html',
      hash: true,
      title: '[TITLE]',
      chunksSortMode: 'dependency'
    }),
    // Sync you code changes with browser.
    new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        proxy: 'http://localhost:8080/'
    })
  ]
};