🌜
ğŸŒž
webpack-blocks

webpack-blocks

v2.1.0

Convenience package that includes all the most common webpack blocks.

npm install webpack-blocks

README

webpack-blocks - the convenience package

Gitter chat NPM Version

This is the webpack-blocks convenience package. It wraps all the most commonly used blocks, so you can install just this single package and have webpack-blocks and your favorite blocks set up.

Usage

Here is a small sample configuration. Instead of requiring from @webpack-blocks/webpack, @webpack-blocks/babel and others you just need a single require() and a single dependency in your package.json.

Of course you can still separately define or install custom blocks and use them as you want.

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

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

Included blocks

webpack-blocks

Check out the

👉 Main documentation

Released under the terms of the MIT license.

Release Notes

2.1.0
By Andy Wermke • Published on April 27, 2020

Just a small maintenance release bumping dependencies. Thanks a lot, @marcofugaro! 😊

Attention: Minimum node.js version is hereby raised from node 8 to node 10.

1.0.0
By Andy Wermke • Published on March 29, 2018

📦 Version 1.0 - finally!

Here we go, version 1.0. A lot has happened and I think I speak for all of us when I say we could easily have made two major version bumps out of that one 😉

Changes since v1.0 release candidate

Support negations in match() glob patterns (#253)

You can now have exclusion patterns without writing ugly regular expressions!

match(['*.js', '*.jsx', '!node_modules'], [
  babel()
])

Allow passing arbitrary rule options via match() (#250)

There was an undocumented limitation before when passing custom webpack rule options via match(): You could only pass include and exclude. This has been fixed now.

You can now pass any kind of option if necessary (note the enforce: 'pre'):

match('*.{js,jsx}', { exclude: 'node_modules', enforce: 'pre' }, [
  babel()
])

Added when() (#243)

There is a new helper on the block: when(). It's a pinch of syntactic sugar for conditionals, so your config won't be cluttered with ternary operators.

module.exports = createConfig([
  when(process.env.CI, [reportBuildStatsPlugin()])
])

New block eslint (#254)

There is now an eslint block and it's even part of the core packages.

const { createConfig } = require('@webpack-blocks/webpack')
const eslint = require('@webpack-blocks/eslint')

module.exports = createConfig([
  eslint(/* eslint options */)
])

Removed proxy() from dev-server block (#251)

We trimmed down the dev-server block a little more. But don't worry, it's still easy as cake to set up a proxy server using the dev-server block:

module.exports = createConfig([
  // use only if `NODE_ENV === 'development'`:
  env('development', [
    devServer({
      proxy: {
        '/api': { target: 'http://localhost:3000' },
      },
    }),
  ])
])

Changes since v1.0 beta

Have a look at the v1.0.0-rc release notes.

Changes since v0.4

Have a look at the v1.0.0-beta release notes and read the migration guide.


This is it. A big shout out to the contributors!

Especially @vlad-zhukov, @marcofugaro, @boxfoot, @dmitmel and @sapegin this time 😊

1.0.0-rc
By Andy Wermke • Published on October 2, 2017

After months of work the v1.0 release candidate has landed!

🚀🚀🚀


The release candidate version is published to npm using the latest tag, not the beta tag anymore and lives now on the master branch were it belongs.

Install today using

npm install --save-dev webpack webpack-blocks

Check out our migration guide to update from v0.4!

A huge thanks to all contributors: @sapegin, @jvanbruegge, @vlad-zhukov, @zcei and all others! 👏


Changes since v1.0.0-beta

@webpack-blocks/assets

  • Added a styleLoader option to css() and css.modules() blocks. With it it's now possible to pass options to the style-loader or remove it from loaders completely.

@webpack-blocks/babel

  • Breaking change: Renamed package from babel6 to babel and moved babel-core to be a peer dependency (#217)

@webpack-blocks/core

  • More useful error message when passing invalid blocks to createConfig() (#171)
  • Less noisy default options

@webpack-blocks/dev-server

  • Removed reactHot (#214)
  • Update webpack-dev-server to v2.6.1, now compatible with webpack v3 (#179)
  • Less noisy default options
  • Make webpack a peer dependency, make compatible with webpack v3 (#174)

@webpack-blocks/extract-text

  • Breaking change: Drop webpack 2 support, update extract-text-webpack-plugin to v3

@webpack-blocks/postcss

  • Breaking change: Remove plugins argument
  • Add minimize option

@webpack-blocks/sass

  • Add minimize option

@webpack-blocks/uglify

This package is completely new!

@webpack-blocks/webpack

  • Added setEnv() (#206)
  • Make resolve() prepend custom extensions (#177)
  • Let core createConfig() validate the passed setters (#171)
  • Made webpack a peer dependency (#169)
  • Made compatible with webpack v3 (#169)

webpack-blocks

  • Renamed babel6 to babel
  • The new version of extract-text requires webpack v3
  • Add @webpack-blocks/uglify
1.0.0-beta
By Andy Wermke • Published on June 12, 2017

Introducing match() #163

Explicit is better than implicit and inconsistent fileType parameters are a disgrace. That's why there shall be match()!

You can now use match() to specify on which files to apply certain loaders. Works with every block that adds a loader, like babel, css, elm, postcss, sass, ...

The blocks still work without match(), though, in order to not break compatibility.

const { createConfig, css, file, match, postcss, url } = require('webpack-blocks')
const path = require('path')

module.exports = createConfig([
  babel(),            // matches *.js, *.jsx outside node_modules/ by default
  match('*.css', { exclude: path.resolve('node_modules') }, [
    css(),
    postcss()
  ]),
  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [
    file()
  ])
])

Using match() with your own blocks

Don't forget to update your own blocks. It's quite simple:

function myCssBlock () {
  return (context, { addLoader }) => addLoader(
    Object.assign({
      test: /\.css$/,    // provide a sane default
      use: [
        'style-loader',
        'css-loader'
      ]
    }, context.match)    // use what was set using match()
  )
}

Deprecations

  • context.fileType is now deprecated, since we have match()
  • fileType parameters in @webpack-blocks/assets blocks & @webpack-blocks/extract-text have been deprecated and will be removed soon

General

License
MIT
Typescript Types
Tree-shakeable
No

Popularity

GitHub Stargazers
2,983
Community Interest
3,164
Number of Forks
115

Maintenance

Commits
10/219/2203
Last Commit
Open Issues
16
Closed Issues
95
Open Pull Requests
3
Closed Pull Requests
29

Versions

Versions Released
10/219/2201
Latest Version Released
Apr 27, 2020
Current Tags
latest2.1.0
next2.0.0-alpha

Contributors

andywer
andywer
Commits: 57
sapegin
sapegin
Commits: 32
jvanbruegge
jvanbruegge
Commits: 18
eXon
eXon
Commits: 14
aaronjensen
aaronjensen
Commits: 13
marcofugaro
marcofugaro
Commits: 13
dmitmel
dmitmel
Commits: 10
smdern
smdern
Commits: 9
timdeschryver
timdeschryver
Commits: 9
jeetiss
jeetiss
Commits: 5
diegohaz
diegohaz
Commits: 5
langovoi
langovoi
Commits: 4
vlad-zhukov
vlad-zhukov
Commits: 4
davidnguyen179
davidnguyen179
Commits: 2
pravdomil
pravdomil
Commits: 2