webpack-blocks - Convenience package for webpack configuration blocks

2.1.0 verified Sat Apr 25 auth: no javascript maintenance

webpack-blocks (v2.1.0) is a higher-level abstraction for building webpack configurations using composable 'blocks' instead of raw config objects. It bundles the most common blocks (babel, css, sass, typescript, uglify, etc.) so you only need one dependency. Designed to simplify webpack config, it follows a functional composition pattern. Release cadence is low (last release 2019). Key differentiator: declarative, composable config vs imperative webpack config. Requires Node >= 10. Alternative to webpack-chain or direct webpack config. Currently in maintenance mode.

Common errors

error Cannot find module 'webpack-blocks' ↓

cause Package not installed or not in node_modules

fix

npm install --save-dev webpack-blocks

error TypeError: createConfig is not a function ↓

cause Incorrect import or require path; missing default export

fix

Use destructured import: const { createConfig } = require('webpack-blocks')

error Module not found: Error: Can't resolve 'babel-loader' ↓

cause Missing peer dependency for babel block

fix

Install babel-loader: npm install --save-dev babel-loader @babel/core

error Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Wrong configuration structure from incompatible block version

fix

Ensure all @webpack-blocks/* packages are of same major version

Warnings

breaking Minimum Node.js version raised to Node 10 in v2.1.0 ↓

fix Upgrade Node to >= 10

deprecated babel6 block is deprecated; use @webpack-blocks/babel or babel from the convenience package ↓

fix Replace babel6 with babel block

gotcha peer dependency on webpack — must be installed separately ↓

fix Install webpack: npm install --save-dev webpack webpack-blocks

gotcha CSS loader does not exclude node_modules by default since v0.4.0; may cause unexpected behavior ↓

fix Explicitly exclude node_modules in match() or use exclude pattern

Install

npm install webpack-blocks

yarn add webpack-blocks

pnpm add webpack-blocks

Imports

createConfig
wrong
```
const { createConfig } = require('webpack-blocks')
```
correct
```
import { createConfig } from 'webpack-blocks'
```
CJS require is supported; ESM import works with bundler. This is the main entry point.
babel
wrong
```
import { babel6 } from 'webpack-blocks'
```
correct
```
import { babel } from 'webpack-blocks'
```
babel6 is deprecated; use babel block. babel block requires @babel/core and babel-loader as peer deps.

match

wrong

const match = require('@webpack-blocks/webpack').match

correct

import { match } from 'webpack-blocks'

Direct require from subpackage is not public API; import from 'webpack-blocks'.

env
wrong
```
import { environment } from 'webpack-blocks'
```
correct
```
import { env } from 'webpack-blocks'
```
The function is named env, not environment. It wraps blocks to apply conditionally based on NODE_ENV.

Quickstart

Demonstrates creating a webpack config with babel, CSS, PostCSS, extraction, uglify, and env-specific blocks using the convenience package.

const webpack = require('webpack');
const { babel, createConfig, css, defineConstants, entryPoint, env, extractText, match, setOutput, uglify, postcss } = require('webpack-blocks');
const cssnano = require('cssnano');

const config = createConfig([
  entryPoint('./src/main.js'),
  setOutput('./build/bundle.js'),
  babel(),
  defineConstants({
    'process.env.NODE_ENV': process.env.NODE_ENV || 'development'
  }),
  match('*.css', { exclude: /node_modules/ }, [
    css(),
    env('production', [
      extractText(),
      postcss({ plugins: [cssnano()] })
    ])
  ]),
  env('production', [uglify()])
]);

module.exports = config;