Exciting news!Announcing our $4.6M Series Seed. Learn more ā†’
Log in


Package Overview
File Explorer

Advanced tools


Webpack block for the webpack 2.x base configuration.


Version published
Yearly downloads
decreased by-16.24%

Weekly downloads



v0.4 - A lot of small improvements

Another 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! šŸ‘

How to upgrade

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.


  • Breaking change: Default CSS loader does not exclude node_modules/ anymore
  • Added createConfig.vanilla() (#80, #95)
  • Made dev-server composable (#78)

Under the hood:

  • Added webpackVersion to context
  • Using webpack-merge v2.3 instead of v0.14
  • Using webpack v2.2 instead of the RC (webpack2 and related blocks only, of course)
  • Fixed: The config object passed to blocks as parameter could contain duplicate values (#79)
  • Added application/x-typescript file type
  • Added text/x-less file type


Looking 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 šŸ˜‰



Webpack blocks - Webpack 2 base configuration

JavaScript Style Guide NPM Version

This is the webpack2 block providing webpack 2 core functionality. Also provides all @webpack-blocks/core exports for convenience.


const HtmlWebpackPlugin = require('html-webpack-plugin') const { addPlugins, createConfig, entryPoint, env, setOutput, sourceMaps, webpack } = require('@webpack-blocks/webpack2') module.exports = createConfig([ entryPoint('./src/main.js'), setOutput('./build/bundle.js'), addPlugins([ new HtmlWebpackPlugin({ inject: true, template: './index.html' }), new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env || 'development') }) ]), env('development', [ // will only enable source maps if `NODE_ENV === 'development'` sourceMaps() ]) ])

Webpack 2 compatible blocks

There are some webpack loaders and plugins that are only compatible with webpack 2 in a certain version. Make sure you use the appropriate webpack blocks:


createConfig(configSetter: Function[]): object

Takes an array of config setters (the functions returned by invoked webpack blocks), invokes them and returns the resulting webpack config object. Already sets some generic default config, like default CSS, font and image file loaders.

createConfig.vanilla(configSetter: Function[]): object

Works just like createConfig(), but provides no default configuration whatsoever. Use it only if you want to get rid of the default loaders for some reason.

group(configSetters: Function[]): Function

Combines an array of blocks to a new joined block. Running this single block has the same effect as running all source blocks.

env(envName: string, configSetters: Function[]): Function

Applies an array of webpack blocks only if process.env.NODE_ENV matches the given envName. If no NODE_ENV is set, it will be treated as 'development'.

defineConstants(constants: object): Function

Replaces constants in your source code with a value (process.env.NODE_ENV for example) using the webpack.DefinePlugin. Pass an object containing your constant definitions: { [constantName: string]: <constantValue: any> }.

Every constant's value is JSON.stringify()-ed first, so you don't have to remember.

Special feature: Using defineConstants multiple times results in a single DefinePlugin instance configured to do all the replacements.

webpack: object

Same as require('webpack').

addPlugins(plugins: WebpackPlugin[])

Add custom plugins to the webpack configuration.

Example usage: addPlugins([ new HtmlWebpackPlugin() ])

customConfig(webpackConfigSnippet: object)

Add some custom configuration to the webpack configuration. The object you pass will be merged into the webpack configuration object.

entryPoint(entryPoint: string|string[]|object)

Adds one or multiple entry points. If the parameter is not an object the entry point(s) will be added to the default chunk named main. This way we make sure that the resulting https://webpack.github.io/docs/configuration.html#entry configuration property will always be an object.

performance(perfBudgetOptions: object)

Set a performance budget. Performance budgets are custom limits (like max bundle size) you can set to make webpack warn you or throw an error if the application exceeds those limits.

Options object:

{ maxAssetSize: number, // File size limit in bytes maxEntrypointSize: number, // Total size (of an entry point) limit in bytes hints: string // "warning" or "error" }

resolveAliases(aliases: object)

Sets resolve.alias. Use it to manually override module resolving.

Example usage: resolveAliases({ foo: path.resolve('./bar.js') }) will make require('foo') resolve to bar.js.

setContext(path: string)

Sets the webpack context. Not to be confused with the webpack-block's context object.

setDevTool(devtool: string)

Use it to manually set the webpack devtool property, like 'eval', 'source-map' and such.

setOutput(output: string|object)

Sets the webpack output property. Use it to tell webpack where to save the output bundle(s).

You can either pass an object that complies to the format described in the webpack docs or just pass the destination file path.

Instead of passing the destination file path you can also

  • Just pass a filename (not the complete path): The directory will default to ./build/.
  • Just pass the path to a directory (trailing /): The filename will default to bundle.js.

sourceMaps(devtool: ?string)

Just a convenience wrapper to enable sourcemaps in an easier-to-read fashion than setDevTool(). Will set webpack's devtool to 'cheap-module-source-map' if no explicit devtool is passed as parameter.

Webpack blocks

Check out the

šŸ‘‰ Main Documentation

Released under the terms of the MIT license.



Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with āš”ļø by Socket Inc