meyer-react-webpack-config

This here thing is a function that returns an opinionated webpack config. The function takes an object of options:

Option	Description
componentPath	path to the root component. Required.
buildPath	path to webpack’s build destination. Required.
jsxstyleLoaderOptions	options object passed to jsxstyle-loader.
emitCallback	function that takes two parameters: the evaluated root component at componentPath and the compilation stats object. Expected to return an object of asset contents keyed by asset name.
htmlTemplate	template file used by html-webpack-plugin.
reactID	ID of the DOM node that React mounts to. Defaults to .react-root.
cssFileName	name of the extracted CSS file. Defaults to bundle.css.
bundleFileName	name of the bundle generated by webpack. Defaults to bundle.js.
browsers	array of browsers supported by babel-preset-env and postcss-cssnext in browserslist format. Defaults to ['last 2 versions', '> 5%'].

how to use this thing

1. Install it:

yarn add webpack webpack-dev-server meyer-react-webpack-config

2. Create a webpack.config.js file that looks like this:

const path = require('path');

module.exports = require('meyer-react-webpack-config')({
  componentPath: require.resolve('./components/Site'),
  buildPath: path.resolve('build'),
});

3. Add scripts to your package.json file:

• For a producution build:

  webpack -p --progress

• For a development hot-reloading environment:

  webpack-dev-server --hot --hotOnly --inline --historyApiFallback