@webpack-blocks/assets NPM

webpack-blocks - assets

This is the assets block providing configuration for the style loader, file loader, URL loader and friends.

Usage

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

module.exports = createConfig([
  css(), // or use `match()` to apply it to other files than *.css

  // will copy font files to build directory and link to them
  match(['*.eot', '*.ttf', '*.woff', '*.woff2'], [
    file()
  ]),

  // will load images up to 10KB as data URL
  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [
    url({ limit: 10000 })
  ])
])

In order to use CSS modules:

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

module.exports = createConfig([
  match(
    ['*.css', '!*node_modules*'],
    [
      css.modules({
        modules: {
          localIdentName: '[name]--[local]--[hash:base64:5]'
        }
      })
    ]
  )
])

API

css(options: ?object)

Will match *.css by default if not used with match(). You can pass all css-loader options. With styleLoader you can pass options to the style-loader, setting it to false will remove the style-loader from loaders.

css.modules(options: ?object)

Will match *.css by default if not used with match(). You can pass all css-loader options.

The difference to css() is that it sets the following css-loader options by default:

modules option is enabled
importLoaders defaults to 1
modules.localIdentName defaults to '[name]--[local]--[hash:base64:5]' in development and '[hash:base64:10]' in production

file(options: ?object)

Must be used with match(). You can pass all file-loader options.

url(options: ?object)

Must be used with match(). You can pass all url-loader options. We strongly recommend setting a limit to prevent huge files to be encoded as a data URL.