Create preset for common basics: Babel + Autoprefixer + best practice config

[andywer]

Since probably 90%+ of the users will want to have Babel and the autoprefixer it would be nice to ship a preset (using group()) that sets some blocks configured in a best-practice manner:

• Babel with babel-preset-env (target last 2 versions for instance)
• PostCSS with autoprefixer (similar target as set for babel-preset-env)
• Set process.env.NODE_ENV (in output code, using defineConstants)
• Source maps in development mode
• Minification and optimization in production build mode
• Set resolve.extensions to webpack defaults plus the popular '' (so it's nice to use with createConfig.vanilla() as well; only needed for webpack 1.x)

Not sure if those should be included

• HTML loader
• HtmlWebpackPlugin

Problems left to solve

• Cannot set PostCSS plugins from within webpack config anymore when using webpack 2 (fixed by Critical fix: Make PostCSS inlined plugin config work with webpack 2 #74 🎉)

[stevenjlho]

Have method to expose preset now?

[sapegin]

'' is not needed for webpack 2.

[andywer]

@stevenjlho Not sure what you mean. Writing presets is already possible, just did not write any yet.

@sapegin True! Edited it :)

[aaronjensen]

FWIW, I think this is too much to include by default. Specifically postcss/babel-preset-env. The other stuff seems fine as a base, I'd have that be a preset rather than a required base.

[andywer]

The idea of that particular preset was to provide some sane defaults to quickly get a fresh project up and running, that's why babel and autoprefixer are listed here. I had something like a create-react-app preset in mind.

Since we are about to remove all implicitly set defaults from createConfig() (#111), it might be wise, though, to create another preset that really just ships the bare minimum of best practice configuration 👍

[sapegin]

I think this kind of presets are out of the scope of webpack-blocks because it makes setup still more complicated then CRA but at the same time you can’t easily modify and customize this preset (the main issue of CRA and the main selling point of webpack-blocks in my opinion) and can’t easily see what’s inside. I think we rather need a cookbook like chapter in the docs that would explain how to use webpack-blocks for React, Vue, Angular, whatever. So you could easily copy configuration and modify it for your project.

[andywer]

Fair enough.