📦 Configure webpack using functional feature blocks.
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.
📦 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 😉
match()
glob patterns (#253)You can now have exclusion patterns without writing ugly regular expressions!
match(['*.js', '*.jsx', '!node_modules'], [
babel()
])
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()
])
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()])
])
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 */)
])
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' },
},
}),
])
])
Have a look at the v1.0.0-rc release notes.
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 😊
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! 👏
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.babel6
to babel
and
moved babel-core
to be a peer dependency (#217)createConfig()
(#171)reactHot
(#214)webpack-dev-server
to v2.6.1, now compatible with webpack v3 (#179)webpack
a peer dependency, make compatible with webpack v3 (#174)plugins
argumentminimize
optionminimize
optionThis package is completely new!
setEnv()
(#206)createConfig()
validate the passed setters (#171)babel6
to babel
extract-text
requires webpack v3@webpack-blocks/uglify
match()
#163Explicit 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()
])
])
match()
with your own blocksDon'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()
)
}
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 soonAnother step towards v1.0, containing one potentially breaking change:
The default CSS loader does not exclude the node_modules/
directory anymore. So you can now just require('some-other-package/stylesheet.css')
without additional configuration.
As the 1.0 release is getting closer I would like to encourage you to provide feedback, so we get to know what works well and what has to be improved.
Please share your experiences when using webpack-blocks, no matter if you encounter any problems or everything worked just fine right away! 👍
Just open your package.json
and upgrade the @webpack-blocks/*
dependencies to ^0.4.0
. Then run npm install
/ yarn
.
Make sure you update all webpack-block packages at once, since the new default CSS loader behavior made changes in css-modules
and postcss
blocks necessary as well.
node_modules/
anymorecreateConfig.vanilla()
(#80, #95)dev-server
composable (#78)Under the hood:
webpackVersion
to context
webpack-merge
v2.3 instead of v0.14webpack
v2.2 instead of the RC (webpack2
and related blocks only, of course)application/x-typescript
file typetext/x-less
file typeLooking for TypeScript support? Then there is good news: @jvanbruegge just added the typescript and tslint blocks.
Check 'em out if you would like to give static typing a try 😉
🎄 Santa Clause is coooooming to town... with a jolly song on his lips and bag full of features and improvements over his shoulder! 🎄
A version bump to 0.3
might not sound very spectacular, but this release is! Consider it one step before the 1.0 release candidate.
Since there has been a breaking change affecting all blocks, make sure that you upgrade all blocks to ^0.3.0
together. An update note has been added to the README as well.
There is one major breaking change under the hood:
fileTypes
is not passed to blocks as first parameter anymore, but rather a context
object containing a fileType
property (which does the same).
The real gimmick here is that you can modify this context object to save metadata you need somewhere else, but that is not supposed to be put into the webpack config object. Very useful in combination with hooks (see below).
The webpack 2 blocks have been merged into the master branch and logic that is common to webpack 1.x and 2.x blocks has been moved to a new @webpack-blocks/webpack-common
package.
Also the webpack2
block is now using the webpack 2 release candidate version and supports webpack performance budgets (use performance()
).
Another great feature to achieve things that could not be done with webpack-blocks
before. For instance you can now use defineConstants()
to instantiate a webpack.DefinePlugin
instance. So far so good, but you can use defineConstants()
multiple times and end up having one single webpack.DefinePlugin
instance containing the constants of all defineConstants()
calls.
Check out How to create your own blocks for details.
There a new sharp tool in the shed: group()
. It lets you combine a set of blocks to a new block that provides the functionality of all those single blocks. Now that there are hooks allowing for more intelligent merging you can now write powerful presets if you get bored during the holidays!
How to create one? Read the manual 😉
The babel6
block now supports include
(additionally to exclude
), presets
and plugins
options. So you can now configure babel from within your webpack configuration using webpack-blocks.
Special thanks again goes to @eXon for steady contribution and feedback! 🙂
Merry Christmas!
This is the first published release of webpack-blocks. Read about its usage in the README.
Try it and leave some feedback!