State of the art webpack / React configuration - reactjs

Question

I'm trying to setup a webpack 2, babel, and React configuration for achieving:
Native ES6/ES7 features
Tree shaking builds
Hot reloading
I had a demo repo but it has distinct stuff mixed, like even JSHint and ESLint at the same time.
I'd like to get my setup up and running and get suggestions for best practices
So, as first option I tried to use babel-preset-env. Then after some dependencies being installed. I ran into this issue:
ERROR in ./src/main.jsx
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (3:0)
However, the first line in my code is import 'babel-polyfill'; then just import's.
This is how my Babel config file looks like:
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}
],
"react"
],
"plugins": [
"babel-plugin-transform-class-properties",
"transform-react-require"
]
}
This is what my development webpack config file looks like:
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
//Entry points to the project
entry: [
'babel-polyfill',
'webpack/hot/dev-server',
'webpack/hot/only-dev-server',
path.join(__dirname, '../src/main.jsx')
],
//Config options on how to interpret requires imports
resolve: {
extensions: [".js", ".jsx"]
},
//Server Configuration options
devServer:{
contentBase: 'build', //Relative directory for base of server
devtool: 'eval',
hot: true, //Live-reload
inline: true,
port: 3000, //Port Number
host: 'localhost', //Change to '0.0.0.0' for external facing server
proxy: {
'^\/api': {
target: 'http://127.0.0.1:9090'
}
},
historyApiFallback: true
},
devtool: 'eval',
output: {
path: buildPath, //Path of output file
filename: 'app.js'
},
plugins: [
new webpack.DefinePlugin({
API_BASE: '""',
PRODUCTION: false,
'process.env.NODE_ENV': '"development"'
}),
//Enables Hot Modules Replacement
new webpack.HotModuleReplacementPlugin(),
//Allows error warnings but does not stop compiling. Will remove when eslint is added
new webpack.NoEmitOnErrorsPlugin(),
//Moves files
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname, "src")),
new ExtractTextPlugin("main.css")
],
module: {
rules: [
{
//React-hot loader and
test: /\.(js|jsx)$/, //All .js and .jsx files
loaders: [ 'babel-loader', 'react-hot-loader'],
//react-hot is like browser sync and babel loads jsx and es6-7
exclude: [nodeModulesPath]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style',
use: 'css'
})
},
{
test: /\.svg$/,
loader: 'svg-sprite?' + JSON.stringify({
name: '[name]_[hash]',
prefixize: true
})
}
]
}
};
module.exports = config;
And this below is package.json
{
"name": "LumaHealth",
"version": "1.0.0",
"description": "LumaHealth",
"main": "start.js",
"scripts": {
"start": "webpack --config ./webpack/webpack.config.development.js",
"build": "webpack --config ./webpack/webpack.config.production.js",
"clean": "rm build/app.js"
},
"repository": {
"type": "git",
"url": "git#github.com:lumahealthhq/web-app.git"
},
"keywords": [],
"author": "Marcelo Oliveira",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.1",
"babel-plugin-react-require": "^3.0.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-preset-env": "^1.2.2",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.26.4",
"enzyme": "^2.0.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.7.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.4.1",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"nyc": "^10.1.2",
"postcss-loader": "^1.3.3",
"postcss-nested": "^1.0.0",
"react-addons-test-utils": "^15.4.1",
"sinon": "^1.17.2",
"style-loader": "^0.13.2",
"sw-precache": "^5.0.0",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"babel-core": "^6.5.2",
"babel-eslint": "^7.0.0",
"babel-plugin-transform-react-require": "^1.0.1",
"babel-polyfill": "^6.23.0",
"co": "^4.6.0",
"express": "^4.12.3",
"file-loader": "^0.10.1",
"humps": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"local-storage": "^1.4.2",
"lodash": "^4.16.4",
"material-ui": "^0.17.0",
"moment": "^2.15.2",
"q": "^1.4.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.6",
"react-slick": "^0.14.4",
"react-tap-event-plugin": "^2.0.0",
"react-web-notification": "^0.2.3",
"redux": "^3.6.0",
"redux-form": "^6.1.1",
"redux-logger": "^2.7.0",
"redux-socket.io": "^1.3.1",
"redux-thunk": "^2.1.0",
"socket.io-client": "^1.7.2",
"url-loader": "^0.5.7",
"vanilla-masker": "^1.0.9"
}
}

Answer 1

I recently upgraded my boilerplate from webpack 1 to webpack 2, feel free to get any information / concept from the webpack config file there, hope it helps.
https://github.com/iroy2000/react-redux-boilerplate