GitHub - ezrealjs/ezreal: Chain building your complex webpackConfig.

Chain building your complex webpackConfig.

Introduction

Ezreal combines some middleware with a preset to build your webpackConfig. Why not use neutrinoJs ？For more details, you can read this pr.

So ezreal can do even better in the following areas

1. Single responsibility principle: a middleware does only one thing
2. Preset support: the preset concept makes it easy to publish to npm to share your configuration
3. Pipeline build: instead of nested call, flat call middleware one by one
4. No side effects: the code implementation makes it more side-effect-free and pure

Nowadays, many excellent packages are facing this problem, with more and more features, each new optional feature requires multiple webpack configuration changes, and the code has to add if elese conditional judgments, the complexity of the code will grow exponentially. And when a feature is deprecated, you forget which files to restore

Getting started

yarn add ezreal-core

const bootstrap = require("ezreal-core");

const webpackConfig = bootstrap({
  // my-preset-react is an npm package or a file
  extends: require.resolve('my-preset-react'),
  middleware: [
    require.resolve('my-middleware-prerender'),
    require.resolve('my-middleware-microFrontEnd'),
    require.resolve('my-middleware-packageCheck'),
    require.resolve('my-middleware-esCheck'),
    require.resolve('my-middleware-sentry'),
    ...
  ]
}).webpack();

Examples

A simple web project

Can provide you with webpackConfig

// examples/simple/webpack.config.js

const bootstrap = require("ezreal-core");

// If there is no .ezrealrc.js
// Can be called directly from a pure function
// bootstrap({
//   extends: "ezreal-preset-react",
//   appHtml: "index.html",
// }).webpack();

module.exports = bootstrap().webpack();

A command line tool

Provide different user configurations for command line tools

// my-cli.js
const bootstrap = require("ezreal-core");
const webpackConfig = bootstrap().webpack();

Better support for different types of projects

// project-a
// .ezrealrc.js
module.exports = {
   extends: "my-preset-mobile" // extends: my-preset-react
}

// project-b
// .ezrealrc.js
module.exports = {
   extends: "my-preset-pc" // extends: my-preset-react
}

Advanced

middleware

modules.exports = function MyAnalyzerMiddleware(chain, options) {
  if (options.analyze) {
    chain
      .plugin('webpack-bundle-analyzer')
      .use(new BundleAnalyzerPlugin(options.analyze));
  }
}

preset

modules.exports = {
  extends: require.resolve('ezreal-preset-react'),
  middleware: [require.resolve('./my-analyzer-middleware')],
  // Set a default value, with a lower priority than the user's configuration
  analyze: true
}

License

MIT licensed.