How to set up Webpack 2.6.1 for React-Toolbox

webpack_2_react_toolbox.md

Webpack 2 setup for React-Toolbox

The full context of the code shown here can be viewed here

|-- client
    |-- package.json
    |-- postcss.config.js
    |-- webpack.config.js

webpack.config.js

const webpack = require('webpack')

const config = {
  entry: __dirname + '/src/app.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },
  devtool: "source-map",
  resolve: {
    extensions: ['.js', '.jsx', '.css']
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['react', 'es2015']
        }
      },

      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      },

    ]
  },

  plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.LoaderOptionsPlugin({
        debug: true
      }),
    ],
}

module.exports = config

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {},
  },
}

package.json

{
  "name": "react_frontend",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.23.0",
    "postcss": "^6.0.3",
    "postcss-cssnext": "^2.11.0",
    "postcss-each": "^0.10.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-mixins": "^6.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-toolbox": "^2.0.0-beta.12",
  }
}