webpack2
Pocket

webpack2がリリースされたのをうけて、自分が浸かってるgulp + webpackの環境もwebpack2へアップデートしてみました。

基本的に以下の記事を参考にしましたが、移行後に出たエラーについて簡単に。

Gulpで始めるwebpack 2入門

Qiita @tonkotsuboy_com

アップデート

パッケージのアップデートは「npm-check-updates」を使いました。

npmの依存パッケージのアップデートを調べてくれるnpm-check-updatesの使い方

以下のコマンドを打って、webpackがバージョン2になっているのを確認して

ncu

以下のコマンドでpackage.jsonの記述をアップデート

ncu -u webpack

最後に以下のコマンドでインストール

npm update

書き方変更

冒頭で紹介したこちらの記事通り、第二引数にwebpackを追加するといいみたいです。

Gulpで始めるwebpack 2入門

Qiita @tonkotsuboy_com
gulp.task('webpack', () => {
  return gulp
    .src(config.tasks.webpack.src)
    .pipe(plumber())
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest(config.tasks.webpack.dest))
})

ここは元から書いてたので特に変更しなくて済みました。

エラーが出たとこ

babelを使ってるんですが、JavaScriptコンパイル時に以下のエラーが…

It's no longer allowed to omit the '-loader' suffix when using loaders.

Google先生によると「loaderをつかうときは「-loader」接頭辞はもう省略できないで」と言っています。

そしてこの文のすぐ下に

You need to specify 'babel-loader' instead of 'babel'

「babel」の代わりに「babel-loader」を指定する必要があります、と書かれてます。

つまり、「webpack.config.js」でこうなってるとこを

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },

こう

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

すると無事動きました!

参考までにこちらのリポジトリを

web-starter-kit

Pocket

カテゴリー: タグ: