Webpack v1からv2へのマイグレーションメモ

開発環境

自分が使っていたところだけを簡単に。詳しくはhttps://webpack.js.org/guides/migrating

以下、webpack.config.jsの変更点:

resolve.extenstions

空の文字列は必要なくなったので削除する。ちなみにデフォルトでは.js、.jsonがresolveされている。

// v1
resolve: {
  extensions: ["", ".js", ".json"],
},
// v2
resolve: {
  extensions: [".js", ".json"],
},

拡張子を指定することで./fooがjsファイルならばrequire("./foo")が可能になる。

module.loadersとmodule.rules

module.loaderのシンタックスはまだサポートされているが、module.rulesにかえるほうが望ましい。

// v1
module: {
  loaders: [
    {
      test: /\.css$/,
      loader: [
        "style-loader", 
        "css-loader?modules=true" 
      ]
    }
  ]
}
// v2
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          "style-loader"
        },
        {
          "css-loader",
          options: {
            module: true
          }
        }
      ]
    }
  ]
}

loaderのチェイン

複数のloaderを!でつなげるのはmodule.loadersオプションでしか使えない。

// v1
module: {
  loaders: [
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }
  ]
}
// v2
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        "style-loader",
        "css-loader"
      ]
    }
  ]
}

-loaderの省略はできなくなった

loader指定時に、-loaderを省略することはできなくなった。

// ×
module: {
  rules: [
    {
      use: [
        "style",
        "css",
        "less"
      ]
    }
  ]
}
// ○
module: {
  rules: [
    {
      use: [
        "style-loader",
        "css-loader",
        "less-loader"
      ]
    }
  ]
}

json-loaderを指定する必要はなくなった

json-loaderがなくとも、自動的にJSONファイルを読み込む。

// ×
module: {
  rules: [
    {
      test: /\.json/,
      loader: "json-loader"
    }
  ]
}
// ○
module: {
  rules: [
  ]
}

module.preLoadersとmodule.postLoadersは削除された

// v1
module: {
  preLoaders: [
    {
      test: /\.js$/,
      loader: "eslint-loader"
    }
  ]
}
// v2
module: {
  rules: [
    {
      test: /\.js$/,
      enforce: "pre",
      loader: "eslint-loader"
    }
  ]
}

UglifyJsPlugin sourceMap

UglifyJsPluginのsourceMapオプションはデフォルトでfalseになった。sourceMapが欲しい場合にはtrue設定する必要がある。

devtool: "source-map",
plugins: [
  new UglifyJsPlugin({
    sourceMap: true
  })
]

UglifyJsPlugin warnings

UglifyJsPluginのcompress.warningsオプションはデフォルトでfalseになった。warningsが欲しい場合にはtrue設定する必要がある。

devtool: "source-map",
plugins: [
  new UglifyJsPlugin({
    compress: {
      warnings: true
    }
  })
]

UglifyJsPlugin minimize loaders

UglifyJsPluginはloadersをminimizeモードに切り替えなくなった。

loadersのminimizeモードは webpack 3 以降に削除される。

古いloadersとの互換性を保つために、pluginを用いてminimizeモードに切り替えることができる。

plugins: [
  new webpack.LoaderOptionsPlugin({
    minimize: true
  })
]

DedupePluginは削除された

webpack.optimize.DedupePluginはもう必要ないのでwebpackの設定から削除する。

OccurrenceOrderPluginはデフォルトで設定される

もうわざわざ指定する必要はない。

debug

webpack 1 では、debugオプションはloadersをdebugモードに切り替える。

loadersのdebugモードは webpack 3 以降に削除される。

古いloadersとの互換性を保つために、pluginを用いてdebugモードに切り替える。

plugins: [
  new webpack.LoaderOptionsPlugin({
    debug: true
  })
]