<commit_before># Migrating to webpack-blocks v1.0

This is the migration guide for upgrading from webpack-blocks v0.4 to v1.0. It is a major update with a couple of breaking changes.

The first section covers the changes you have to make to your webpack-blocks configuration. The second section covers additional new features that you can use. The last section covers how to upgrade your custom blocks.


## Table of Contents

<!-- To update run: npx markdown-toc --maxdepth 2 -i docs/MIGRATION-GUIDE.md -->

<!-- toc -->

- [Migrating configuration](#migrating-configuration)
- [Additional features](#additional-features)
- [Migrating custom blocks](#migrating-custom-blocks)

<!-- tocstop -->

## Migrating configuration

### `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()`. **However, blocks dropped the `fileType`, `exclude` & `include` from their options. Use `match()` for that.**

```js
const { createConfig, css, file, match, postcss, url } = require('webpack-blocks')
const path = require('path')

module.exports = createConfig([
  // Matches *.js, *.jsx outside node_modules/ by default
  babel(),

  match('*.css', { exclude: path.resolve('node_modules') }, [
    css(),
    postcss()
  ]),

  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [
    file()
  ])
])
```

### `@webpack-blocks/assets` package

The `assets` package contains the `css`, `css.modules`, `file` and `url` blocks which were contained in `@webpack-blocks/webpack` in v0.4. Use these blocks to configure a `css-loader`, `file-loader` or `url-loader`.

See the package's [README](../packages/assets/README.md) for further details.

### `webpack-blocks` package

The new `webpack-blocks` package can be installed using `npm install --save-dev webpack-blocks`. It is a convenience package, wrapping and exporting most of frequently used blocks, so you don't have to manage all those small package dependencies by yourself. Contains:

* assets
* babel
* dev-server
* extract-text
* postcss
* sass
* typescript
* uglify
* webpack

It also exports all the `@webpack-blocks/webpack` utility functions. See the package's [README](../packages/webpack-blocks/README.md) for further details.

### No more webpack v1

Support for webpack 1.x has been dropped. If you have not upgraded yet we recommend doing so soon.

### webpack as a peer dependency

Webpack is now a peer dependency of `@webpack-blocks/webpack`. Make sure to explicitly `npm install --save-dev webpack`.

### babel6 is now babel

The `@webpack-blocks/babel6` package has been renamed to `@webpack-blocks/babel`. You can now choose which version of babel to use, since `babel-core` is now a peer dependency (see below).

### babel-core as a peer dependency

`babel-core` is now a peer dependency of the `babel` block, so you can control which version of `babel-core` to use. Make sure to `npm install --save-dev babel-core` in your application.

### `webpack` no longer exported

`webpack` is no longer exported by `@webpack-blocks/webpack`. Use `const webpack = require('webpack')` instead which is more explicit.

### `resolve()` instead of `resolveAliases()`

The `resolveAliases` utility in `@webpack-blocks/webpack` has been replaced by the more generic `resolve`.

```diff
module.exports = createConfig([
-  resolveAliases({ package: path.resolve('./src/package') })
+  resolve({
+    alias: { package: path.resolve('./src/package') }
+  })
])
```

### Removed `devServer.reactHot()`

The `devServer.reactHot()` block has never worked too well. We also decided not to ship framework-specific blocks as core features.

If you feel like this is a feature you really want to have, create a new fancy React hot loader block and share it with the world!

### Requiring Node.js 6+ now

Please use node 6 or newer. We don't transpile the webpack-blocks code for legacy node versions anymore.

---

## Additional features

### webpack v3

We officially support webpack 3 now 🎉
<commit_msg>Add note about extract-text & webpack versions to migration guide<commit_after># Migrating to webpack-blocks v1.0

This is the migration guide for upgrading from webpack-blocks v0.4 to v1.0. It is a major update with a couple of breaking changes.

The first section covers the changes you have to make to your webpack-blocks configuration. The second section covers additional new features that you can use. The last section covers how to upgrade your custom blocks.


## Table of Contents

<!-- To update run: npx markdown-toc --maxdepth 2 -i docs/MIGRATION-GUIDE.md -->

<!-- toc -->

- [Migrating configuration](#migrating-configuration)
- [Additional features](#additional-features)
- [Migrating custom blocks](#migrating-custom-blocks)

<!-- tocstop -->

## Migrating configuration

### `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()`. **However, blocks dropped the `fileType`, `exclude` & `include` from their options. Use `match()` for that.**

```js
const { createConfig, css, file, match, postcss, url } = require('webpack-blocks')
const path = require('path')

module.exports = createConfig([
  // Matches *.js, *.jsx outside node_modules/ by default
  babel(),

  match('*.css', { exclude: path.resolve('node_modules') }, [
    css(),
    postcss()
  ]),

  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [
    file()
  ])
])
```

### `@webpack-blocks/assets` package

The `assets` package contains the `css`, `css.modules`, `file` and `url` blocks which were contained in `@webpack-blocks/webpack` in v0.4. Use these blocks to configure a `css-loader`, `file-loader` or `url-loader`.

See the package's [README](../packages/assets/README.md) for further details.

### `webpack-blocks` package

The new `webpack-blocks` package can be installed using `npm install --save-dev webpack-blocks`. It is a convenience package, wrapping and exporting most of frequently used blocks, so you don't have to manage all those small package dependencies by yourself. Contains:

* assets
* babel
* dev-server
* extract-text
* postcss
* sass
* typescript
* uglify
* webpack

It also exports all the `@webpack-blocks/webpack` utility functions. See the package's [README](../packages/webpack-blocks/README.md) for further details.

### No more webpack v1

Support for webpack 1.x has been dropped. If you have not upgraded yet we recommend doing so soon.

### webpack v3 is the default

Most blocks should still work with webpack v2, but the latest `@webpack-blocks/extract-text` requires webpack v3.

To use it with webpack v2, install the older beta version. See the package's [README](../packages/extract-text/README.md) for further details.

### webpack as a peer dependency

Webpack is now a peer dependency of `@webpack-blocks/webpack`. Make sure to explicitly `npm install --save-dev webpack`.

### babel6 is now babel

The `@webpack-blocks/babel6` package has been renamed to `@webpack-blocks/babel`. You can now choose which version of babel to use, since `babel-core` is now a peer dependency (see below).

### babel-core as a peer dependency

`babel-core` is now a peer dependency of the `babel` block, so you can control which version of `babel-core` to use. Make sure to `npm install --save-dev babel-core` in your application.

### `webpack` no longer exported

`webpack` is no longer exported by `@webpack-blocks/webpack`. Use `const webpack = require('webpack')` instead which is more explicit.

### `resolve()` instead of `resolveAliases()`

The `resolveAliases` utility in `@webpack-blocks/webpack` has been replaced by the more generic `resolve`.

```diff
module.exports = createConfig([
-  resolveAliases({ package: path.resolve('./src/package') })
+  resolve({
+    alias: { package: path.resolve('./src/package') }
+  })
])
```

### Removed `devServer.reactHot()`

The `devServer.reactHot()` block has never worked too well. We also decided not to ship framework-specific blocks as core features.

If you feel like this is a feature you really want to have, create a new fancy React hot loader block and share it with the world!

### Requiring Node.js 6+ now

Please use node 6 or newer. We don't transpile the webpack-blocks code for legacy node versions anymore.

---

## Additional features

{'fraction_non_alphanumeric': 0.12334077293551039, 'fraction_numerical': 0.00422882650064607, 'mean_word_length': 4.185140073081608, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1743563', 'n_tokens_mistral': 2516, 'n_tokens_neox': 2414, 'n_words': 1051}