Simpler webpack config concept

webpack.config.babel.js

import webpackSimpleConfig from "webpack-simple-config"

/*
ideas:
- simpler config
- fix loaders order (imo, more logical order): proof is that every new webpack user don't get this part
- no tons of way to provide config via string, query etc
- some shortcuts: simple extract, aliases
*/

export default webpackSimpleConfig({
  loaders: {
    css: {
      "postcss-loader": true,
      "css-loader": {
        modules: true,
        localIdentName: "[path][name]--[local]--[hash:base64:5]",
      },
      "style-loader": true,
    },
    "html|ico|jpe?g|png|gif": {
      "file-loader": {
        name: "[path][name].[ext]",
        context: path.join(config.cwd, config.source),
      }
    },
    "svg": [ "svgo-loader", "raw-loader" ],
    "woff2|woff|ttf|eot": "file-loader",
  }
  extract: [ "css" ],
  aliases: {
    "~": `${__dirname}/src`,
  }
})

Do you want this to be something real?

This is even better than webpack 2 syntax.

And loader order is now top to bottom :huray:

IMHO current webpack loaders order more intuitive,
just think about loaders as about functions combined with compose operation.

compose (
  style-loader,
  css-loader,
  postcss-loader
)

You get the idea.

My idea is to simplify so this fit in a json config :)

https://github.com/MoOx/webpack-easy-config