webpack-blocks-more ·

Just a few blocks that 📦webpack-blocks is missing.

Designed to be used with webpack@3+ and webpack-blocks@1+.

Table of Content

• API
  • watch([options])
  • parser([options])
  • image([options])
  • babel([options])
  • postcss([options])
  • stylus([options])
  • extract([options])
  • thread([options])

API

watch([options])

Watch mode.

Arguments

1. [options] (Object): See watchOptions for available properties.

parser([options])

Parser options.

Arguments

1. [options] (Boolean|Object): See Rule.parser

Example

const {createConfig} = require('@webpack-blocks/webpack');
const {parser} = require('webpack-blocks-more');

module.exports = createConfig([
  parser({
    amd: false,
    browserify: false,
    requireJs: false,
    system: false,
    requireInclude: false,
    requireEnsure: false,
  }),
]);

babel([options])

Arguments

1. [options] (Object): babel-loader options.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const {thread, babel} = require('webpack-blocks-more');

module.exports = createConfig([
  match(['*.js', '*.mjs'], {exclude: 'node_modules'} [
    thread(),
    babel(),
  ]),
]);

image([options])

Arguments

1. [options] (Object): image-webpack-loader options.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const {file} = require('@webpack-blocks/assets');
const {image} = require('webpack-blocks-more');

module.exports = createConfig([
  match(['*.jpg', '*.png'], [
    file(),
    image(),
  ]),
]);

postcss([options])

Arguments

1. [options] (Object): postcss-loader options.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const {file, css} = require('@webpack-blocks/assets');
const {extract, postcss} = require('webpack-blocks-more');

module.exports = createConfig([
  // for development:
  match('*.styl', [
    css(),
    postcss({
        plugins: {
            autoprefixer: {}
        }
    }),
  ]),

  // for production:
  match('*.styl', [
    file({
      name: '[hash:20].css',
    }),
    extract(),
    css({
      styleLoader: false,
    }),
    postcss({
        plugins: {
            autoprefixer: {}
        }
    }),
  ]),
]);

stylus([options])

Arguments

1. [options] (Object): stylus-loader options.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const {file, css} = require('@webpack-blocks/assets');
const {extract, stylus} = require('webpack-blocks-more');

module.exports = createConfig([
  // for development:
  match('*.styl', [
    css(),
    stylus(),
  ]),

  // for production:
  match('*.styl', [
    file({
      name: '[hash:20].css',
    }),
    extract(),
    css({
      styleLoader: false,
    }),
    stylus(),
  ]),
]);

extract([options])

Arguments

1. [options] (Object): extract-loader options.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const {file, css} = require('@webpack-blocks/assets');
const {extract} = require('webpack-blocks-more');

module.exports = createConfig([
  match('*.css', [
    file({
      name: '[hash:20].css',
    }),
    extract(),
    css({
      styleLoader: false,
    }),
  ]),
]);

thread([options])

Arguments

1. [options] (Object):
   • all thread-loader options.
   • warmupModules (Array): an array of modules to prewarm.

Example

const {createConfig, match} = require('@webpack-blocks/webpack');
const babel = require('@webpack-blocks/babel');
const {thread} = require('webpack-blocks-more');

module.exports = createConfig([
  match('*.js', [
    thread({
      warmupModules: ['babel-loader', '@babel/core', '@babel/preset-env'],
    }),
    babel({
      cacheDirectory: true,
    }),
  ]),
]);