webpack-flow

How does this work?

Example

// Create Webpack Config in a composable way:
flow.createConfig([
  flow.entry('./src/index.js'),
  flow.babel(),
  flow.env('production', [
    flow.dest('./dist/[name].[chunkhash].js', {
      publicPath: '/my/cdn/'
    })
  ]),
  flow.env('development', [
    flow.dest('dist/[name].js')
  ])
])

webpack-flow is similar to webpack-blocks but we're using webpack-chain instead of webpack-merge under the hood. With webpack-chain you can manage deep nested webpack config in a predictable way while webpack-merge kind of looks like a black-box to me.

flow.createConfig(flows)

It creates a webpack-chain instance, say config, and passes it through each flow to manipulate. A flow is a function which takes context (which you can use to access config) as argument, it could also be a higher order function if your flow needs options (most likely it does).

flow

An example flow which defines some constants:

+ function defineConstants(constants) {
+   return context => {
+     context.config.plugin('define-constants')
+       .use(context.webpack.DefinePlugin, [stringifyObjValue(constants)])
+   }
+ }

function stringifyObjValue(obj) {
  return Object.keys(obj).reduce((res, key) => {
    res[key] = JSON.stringify(obj[key])
    return res
  }, {})
}

+ // Then use it
+ flow.createConfig([
+   defineConstants({
+     'process.env.NODE_ENV': 'development'
+   })
+ ])

Install

yarn add webpack-flow

Usage

// webpack.config.js
const flow = require('webpack-flow')

module.exports = flow.createConfig([
  flow.entry('src/index.js'),
  //...
])

For more usages please head to documentations.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

webpack-flow © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin