webpack + babel + react

webpack.config.js

// webpack.config.js - webpack 2 + babel + react + separate LESS to css file config

// Required packages:
// yarn add --dev webpack babel-loader babel-core babel-preset-es2015 babel-preset-react extract-text-webpack-plugin less css-loader style-loader less-loader

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: './build/bundle.js',
    // For multiple entry points or hash: bundle-[name]-[hash].js
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          },
        },
      },
      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
        }),
      },
    ],
  },

  plugins: [
    new ExtractTextPlugin('./build/style.css'),
  ],

  devtool: 'source-map',
}