Takeno/package.json

## package.json
{
  "scripts": {
    "start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --watch",
    "build": "node_modules/webpack/bin/webpack.js --config prod.webpack.config.js -p"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^15.2.0",
    "react-dom": "^15.2.0",
  }
}

## prod.webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/js/main.js',
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react', 'stage-0']
            }
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css!less')
        }, {
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'file-loader'
        }, {
            test: /\.png$/,
            loader: 'url-loader?mimetype=image/png'
        }]
    },
    plugins: [
        new ExtractTextPlugin('main.css', {
            allChunks: true
        })
    ],
    output: {
        filename: 'bundle.js',
        path: __dirname + '/../web/assets'
    },
};

## src-index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Welcome!</title>
        <link rel="stylesheet" href="/assets/main.css" />
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    </head>
    <body>
        <main id="app" className="main-wrapper"></main>
        <script src="bundle.js"></script>
    </body>
</html>

## src-js-App.js
import React from 'react';

export default function App (props) {
  return <span>{props.text}</span>
};

## src-js-main.js
require('../css/main.less');
import {render} from 'react-dom';
import App from './App';


render(<App text="Hello, World!" />, document.getElementById('app'));

## webpack.config.js
var webpack = require('webpack');

module.exports = {
    entry: './src/js/main.js',
    devServer: {
        hot: true,
        contentBase: __dirname + '/src',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react', 'stage-0']
            }
        },
        {
            test: /\.less$/,
            loader: 'style-loader!css!less'
        }, {
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'file-loader'
        }, {
            test: /\.png$/,
            loader: 'url-loader?mimetype=image/png'
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: __dirname + '/../web/assets'
    },
};
	{
	"scripts": {
	"start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --watch",
	"build": "node_modules/webpack/bin/webpack.js --config prod.webpack.config.js -p"
	},
	"devDependencies": {
	"babel-core": "^6.10.4",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.9.0",
	"babel-preset-react": "^6.11.1",
	"babel-preset-stage-0": "^6.5.0",
	"css-loader": "^0.23.1",
	"extract-text-webpack-plugin": "^1.0.1",
	"file-loader": "^0.9.0",
	"less": "^2.7.1",
	"less-loader": "^2.2.3",
	"style-loader": "^0.13.1",
	"url-loader": "^0.5.7",
	"webpack": "^1.13.1",
	"webpack-dev-server": "^1.14.1"
	},
	"dependencies": {
	"react": "^15.2.0",
	"react-dom": "^15.2.0",
	}
	}
	var ExtractTextPlugin = require('extract-text-webpack-plugin');

	module.exports = {
	entry: './src/js/main.js',
	module: {
	loaders: [{
	test: /\.js$/,
	loader: 'babel',
	query: {
	presets: ['es2015', 'react', 'stage-0']
	}
	},
	{
	test: /\.less$/,
	loader: ExtractTextPlugin.extract('style-loader', 'css!less')
	}, {
	test: /\.(ttf\|eot\|svg\|woff(2)?)(\?[a-z0-9=&.]+)?$/,
	loader: 'file-loader'
	}, {
	test: /\.png$/,
	loader: 'url-loader?mimetype=image/png'
	}]
	},
	plugins: [
	new ExtractTextPlugin('main.css', {
	allChunks: true
	})
	],
	output: {
	filename: 'bundle.js',
	path: __dirname + '/../web/assets'
	},
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Welcome!</title>
	<link rel="stylesheet" href="/assets/main.css" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
	</head>
	<body>
	<main id="app" className="main-wrapper"></main>
	<script src="bundle.js"></script>
	</body>
	</html>
	import React from 'react';

	export default function App (props) {
	return <span>{props.text}</span>
	};
	require('../css/main.less');
	import {render} from 'react-dom';
	import App from './App';


	render(<App text="Hello, World!" />, document.getElementById('app'));
	var webpack = require('webpack');

	module.exports = {
	entry: './src/js/main.js',
	devServer: {
	hot: true,
	contentBase: __dirname + '/src',
	},
	module: {
	loaders: [{
	test: /\.js$/,
	loader: 'babel',
	query: {
	presets: ['es2015', 'react', 'stage-0']
	}
	},
	{
	test: /\.less$/,
	loader: 'style-loader!css!less'
	}, {
	test: /\.(ttf\|eot\|svg\|woff(2)?)(\?[a-z0-9=&.]+)?$/,
	loader: 'file-loader'
	}, {
	test: /\.png$/,
	loader: 'url-loader?mimetype=image/png'
	}]
	},
	plugins: [
	new webpack.HotModuleReplacementPlugin()
	],
	output: {
	filename: 'bundle.js',
	path: __dirname + '/../web/assets'
	},
	};