webpack-blocks - assets


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

Usage

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

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

$3

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.

$3

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

$3

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

$3

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.

webpack-blocks

Check out the

👉 Main documentation

Released under the terms of the MIT license.