webpack2へ移行する軽いメモ

npmの方もbetaが取れて、2.2.1が公式に配布となりました。

www.npmjs.com

公式サイト

webpackのversion:2のために公式サイトが作られました。 webpack

移行の手順

詳しくはこちらを確認してください。
Migrating from v1 to v2

Medium

medium.com medium.com

移行における変更点

フィールドバリデータ

設定ファイルのフィールドを検証します。
v1ではwebpack-validatorが必要でしたが、v2ではデフォルトで入っています。

ローダー

リネーム

module.loaders -> module.rules
loaders -> use
query -> options

{
  rules: [
    {
      test: /\.js$/,
      use: ['babel-loader'],
      options: {
      }
    }
  ]
}

module-loaders-is-now-module-rules

preLoadersとpostLoaders

ローダーを呼び出すタイミングを設定するpreとpostのキーがなくなります。
v1ではmodule.preLoaders, module.postLoadersの中に各ローダーの設定を書いていましたが、v2ではすべてのローダーがrulesに入りキーでの区別がなくなります。
その代わりに、enforceを各ルール内に設定します。

{
  rules: [
    {
      test: /\.js$/,
      use: ['eslint-loader'],
      enforce: 'pre' // or 'post'
    }
  ]
}

module-preloaders-and-module-postloaders-was-removed

ローダーチェイン

style-loader!css-loader!less-loader のようなv1の書き方はuseではサポートされません。
module.loadersの場合のみサポートされます。
useを使ったときの上記の書き方だと以下のようになります。

rules: {
  use: [
    'style-loader',
    'css-loader',
    'less-loader'
  ]
}

chaining-loaders

-loaderのサフィックスについて

-loaderを設定なしで省略することはできなくなります。
もし省略したい場合は、resolveLoader.moduleExtensions = ['-loader'] を設定する必要があります。
できなくなった理由として、エラーが理解しづらくなるからです。
Remove automatic -loader module name extension · Issue #2986 · webpack/webpack · GitHub
automatic-loader-module-name-extension-removed

jsonのロードについて

今まではjson-loaderが必要でしたが、設定の必要がなくなります。
v2以降は自動的にwebpack側が内部で呼び出します。
Support JSON out of the box · Issue #3363 · webpack/webpack · GitHub
json-loader-is-not-required-anymore

プラグイン

名前の変更が必要(デプリケートなものも含む)

OccurenceOrderPlugin -> OccurrenceOrderPlugin
NoErrorsPlugin -> NoEmitOnErrorsPlugin

消されたもの

DedupePlugin
ResolverPlugin
OldWatchingPlugin

extract-text-webpack-plugin

今現在、v2.0.0-rc.2となっています。なので、何も指定無しでnpmからinstallすると1.0.1がダウンロードされるので注意が必要です。
引数のとり方が変わりました。今まではファイル名とオプションが別々だったのが、すべてオブジェクトで包みます。
今現在、急ぎで開発を行っています。

new ExtractTextPlugin({
  filename: 'bundle.css',
  disable: false,
  allChunks: true
})

https://github.com/webpack-contrib/extract-text-webpack-plugin/milestone/1github.com
extracttextwebpackplugin-breaking-change

resolve

resolveの書き方が変わります。
rootがmodules にリネームされました。
ここにbower_componentsを書き、descriptionFilesにbower.json書くとnode_modulesと同じように引けます。
今まではresolverPluginで引いていたのですが、この書き方でいけるようになりました。
Resolve

webpack以外での変更するべき設定

Babel

tree shakingのため、es6 modulesからcommonJS modulesへの変換を停止させます。

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

mixing-es2015-with-amd-and-commonjs

react-hot-loader

github.com

まだ、npmの方は1.3.1系ですが、3系にそろそろ(?)上がりそうなので追加します。 1系から3系への変更はこちらを参照
1系では以下の用に書いてたのですが、

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(
      <AppContainer>
         <NextApp />
      </AppContainer>,
      rootEl
    );
  });
}

3系では上記のNextAppの部分が必要なくなり、共通化することが可能になりました。

1系: index.js
3系: index.js

詳しい構成等は以下を参照してください。nextブランチが3.0.0向けになっています。 github.com

Document React Hot Loader 3 · Issue #243 · gaearon/react-hot-loader · GitHub React Hot Loader 3 by gaearon · Pull Request #240 · gaearon/react-hot-loader · GitHub

Jest

.babelrcの方でmodules: falseしますが、JestはNodeで動くため、commonJS modulesにする必要があります。
テストのときだけcommonJS modulesへ変換します。

{
  "presets": [
    ["es2015", {"modules": false}]
  ],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

https://facebook.github.io/jest/docs/webpack.html#using-with-webpack-2facebook.github.io

ローダの設定を書く場所

フィールドのバリデータが入り、今までルートに設定を書いていたものは使えなくなりました。(e.g. postcss)
書き方は2種類(設定ファイルの書けるもの(babel, postcss, etc…)については3種類)あります。
各種ローダのoptionsを使う方法、LoaderOptionsPluginを使う方法です。
基本的に自分は、LoaderOptionsPluginの方では書かず、外部設定ファイルかoptionsのどちらかで定義します。理由として、LoaderOptionsPluginの場合はグローバル(１つしか宣言できない)と同じ扱いになるので同じローダでも個別に適応することをわけるのが難しくなるからです。
(これにおいては設定ファイルでもグローバルになるのでダメですが。。)

技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);: