Loox Uと初音ミクで行こう！

webpack4→webpack5でハマった 久々のLooxUと初音ミクで行こう！の更新。皆様お久しぶりです。 今回は、webpack4からwebpack5へ移行した際にハマった出来事について記載したいと思います。 事象 Module not found: Error: Can't resolve '/manifest.json' エラーメッセージとしては、上記の様なメッセージが出ていました。 なんとなく、html-webpack-pluginで呼び出している箇所に問題がありそう。 しかし、その設定を見る限り特に変な書き方とかをしていなかったので、一体何が問題なのかしばらく分かりませんでした。 原因解明 html-webpack-pluginの templateのドキュメント を読んでいて、原因に気が付きました。 1) Don't set any loader これかー！ webpack.config.jsに書いてあった、 module: { rules: [ { test: /\.html$/, loader: 'html-loader' }], }, この部分を無効化したら無事に解決しました。 いやあ、とんでもない所に落とし穴があるものです（笑）

webpack の babel-loader で、@babel/preset-envのオプションを指定して、useBuiltInsなどを使えるようにする まずは、結論のコードから { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: [['@babel/preset-env', { useBuiltIns: "usage", corejs: 3 }]] } }, exclude: /node_modules/, } 以上。 以上じゃねえよ。 preset-envの部分に注目。 直感的には、 presets: ['@babel/preset-env', { useBuiltIns: "usage", corejs: 3 }] と書けば上手く行きそうなのだが、エラー吐かれます。 正しくは、上記の設定のように presets: [['@babel/preset-env', { useBuiltIns: "usage", corejs: 3 }]] と、大かっこで2回囲ってやる必要がある。 めっちゃ面倒