だましだまし使っていたwebpack1をwebpack4にアップデート

はじめに

約２年前に導入したwebpack1から更新していなかったプロジェクトをwebpack4リリースを機に更新しました。

v2からの仕様かどうかはおいといて、webpack4にしたらどういうエラーがでて、どういう対応したのかを記載します。

更新手順

アップデートではなく、まったくのインストールから行いました。

$ yarn init
$ yarn add -D webpack webpack-cli #wepack-cliが必要になりました

webpack.config.jsをwebpack1で作成したwebpack.config.jsを元に最小の設定で新たに作成します。

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/path/to/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  root: [
    path.resolve('./src')
  ]
};

出くわしたERRORたち

error1: Module not found: Error: Can't resolve ...

まず大量にでたエラーです。
resolve.root、resolve.fallback、resolve.modulesDirectories
これらのオプションはresolve.modulesオプションに置き換える必要がありました。以下のように変更が必要です。

  resolve: {
-   root: path.join(__dirname, "src")
+   modules: [
+     path.join(__dirname, "src"),
+     "node_modules"
+   ]
  }

error2: Module parse failed: Unexpected token (1:0)

htmlをimportしている箇所で発生しました。
そもそもhtml-loaderをwebpack.config.jsに定義していなかったので定義します。
ただ、module.loaders は今は module.rulesの記述方法に変わっているので、そこを修正します。
※非推奨ですが、古い構文もそのまま使用できるようです。

 module: {
-   loaders: [
+   rules: [
      {
        test: /\.html$/,
-       loader: 'html-loader'
+       use: [
+         {
+           loader: "html-loader"
+         }
        ]
      }
    ]
  }

error3: Module parse failed: Unexpected token in JSON at position 0

jsonファイルをimportしている箇所で発生していました。
同様の原因かと思いきや、webpack4ではjson-loader もう必要ないとのこと
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

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

ただ今回、これはうまくいきませんでした。
普通にjson-loaderを使用してもエラー消えませんでした。

探しに探して、行き着いたのが以下のissueです。
https://github.com/webpack/webpack/issues/6572

結局webpack.config.jsでjson-laoderの設定は必要なのかは解明できなかったのですが、以下の設定で解決しました。typeをつけることでエラーが消えました。

{
   type: 'javascript/auto',
   test: /\.json$/,
   use: [ { loader: 'json-loader' } ]
}

typeに関しては以下の記事で詳しく解説しています。
次のリリースであるwebpack4の主な変更点 - モジュールタイプのサポート

error4: The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

※これは警告でした。
実行後にコンソールにでる警告です。
production, development, noneのモードを指定していない場合にでる警告のようです。
webpack --mode productionのように指定して実行すると警告はでなくなります。

---

一旦ここまでで、無事バンドルされ、動作しました。

バージョン移行に関しては基本的に以下の公式サイトを参照しています。
https://webpack.js.org/guides/migrating/