batpack

A battery included and extensible webpack config generator.

Current heavily work in progress, API may change at any time.

Usage

# Install batpack
yarn add batpack -D

# Create webpack config
echo '
const { toWebpackConfig, tsReact } = require('batpack')
module.exports = toWebpackConfig(tsReact)
' > ./webpack.config.js

# Or let's choose some presets
echo '
const { toWebpackConfig } = require('batpack')
const { react } = require('batpack/lib/presets/react')
const { sass } = require('batpack/lib/presets/sass')
module.exports = toWebpackConfig(
  react(),
  sass(),
)
' > ./webpack.config.js

# Run webpack-dev-server
yarn webpack-dev-server

Current presets

• typescript
• react
• sass

Write your own preset

Let's write a less preset and use it:

const { toWebpackConfig } = require('batpack')
const { react } = require('batpack/lib/presets/react')
module.exports = toWebpackConfig(
  react(),
  // Use the less preset
  less(),
)

// We write a function receive some options
// Preset type definition: ./src/types/Preset.ts
function less(options) {

  // Return a function receive Context and return Context
  // Context type definition: ./src/types/Context.ts
  return function({ run, ...ctx }) {
    return {
      // You can emit some info in current step
      // For example, declare this preset own existence, guide
      // other presets to add some other configuration, just like
      // typescript preset (./src/presets/typescript.ts) does
      ...ctx,
      run: function(ctx) {
        // Manipulate webpack config and return Context instance
        // ctx.config is a webpack-chain Config instance

        ctx.config.module
           .rule('less')
             .test(/\.less$/)
             .use('style')
               .loader('style-loader')
               .end()
             .use('css')
               .loader('css-loader')
               .end()
             .use('less')
               .loader('less-loader')
               .end()

        return run(ctx)
      },
    }
  }
}