webpkr

Webpkr is a build system for webpack configurations. See docs.

Declarative Build Scripts

• Write declarative build scripts.
• Stop mutating monolithic objects.
• Plain ol' JavaScript.

 // base.js
context( projectDir )
entry( './src/index.js')
output( () => {
  filename( 'bundle.js' )
  path$( 'dist' ) } )

Single Build Truth

• All code in the same build script.
• No need to clone configurations.

 // devtool.js
 // only for NODE_ENV=development
development( () => {
  devtool( 'cheap-module-source-map' ) } )

Logical Partitioning

• Partition code logically for reuse.

 // css.js
plugin( new ExtractTextPlugin( ) )
module$( () => {
  rule( () => {
    test( /\.css$/ )
    use( ExtractTextPlugin.extract( {
      use: 'css-loader', } ) ) } ) } )
 

Just require

• Order of assembly is largely unimportant.
• Webpkr builds correct configuration object.

 //index.js
require('./base')
require('./devtool')
require('./css')  //that's it

Getting Started

Install with npm:

$ npm install -D webpkr webpack

Create src/index.js and add:

console.log('Hello, world');

By default, webpkr looks for config scripts in the ./webpkr module. Create a webpack subdirectory in your project's root and add file index.js in it:

$ mkdir webpkr
$ touch webpkr/index.js

Add the following DSL script to webpkr/index.js:

context( projectDir )
entry( './src/index.js')
output( () => {
  filename( 'bundle.js' )
  path$( 'dist' )
} )

Create a webpack.config.js in your project's root and add:

const webpkr = require('webpkr');
module.exports = webpkr({projectDir: __dirname});

Run webpack:

$ ./node_modules/.bin/webpack

The DSL script generates the following webpack configuration:

{
  context: '/proj/repos/webpkr/test/simple',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: '/proj/repos/webpkr/test/simple/dist'
  }
}

The bundled output is available in dist/bundle.js.

See docs.