webpack-blocks icon indicating copy to clipboard operation
webpack-blocks copied to clipboard

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

Open andywer opened this issue 7 years ago • 7 comments

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 #74 🎉)

andywer avatar Dec 29 '16 11:12 andywer

Have method to expose preset now?

stevenjlho avatar Feb 13 '17 17:02 stevenjlho

'' is not needed for webpack 2.

sapegin avatar Feb 13 '17 17:02 sapegin

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

@sapegin True! Edited it :)

andywer avatar Feb 13 '17 17:02 andywer

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.

aaronjensen avatar Feb 27 '17 18:02 aaronjensen

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 👍

andywer avatar Feb 27 '17 19:02 andywer

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.

sapegin avatar Aug 09 '17 12:08 sapegin

Fair enough.

andywer avatar Aug 09 '17 18:08 andywer