webpack-blocks Files

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.

:::js
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:

:::js
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