久しぶりにwebpackを触ったらタイトル通り怒られてしまったので
その時調べたメモです。
webpackのversionは3.8.1でした。
エラー内容はこんな感じ
$make webpack/admin path/to/npm run webpack -- --config ./webpack.config.js > webpack-hello@1.0.0 webpack /Users/a-tanaka/booster > webpack --watch "--config" "./webpack.config.js" Webpack is watching the files… Hash: 4f6ee5333597035827a3 Version: webpack 3.8.1 Time: 48ms ERROR in Entry module not found: Error: Can't resolve 'babel' in '/Users/a-tanaka/booster' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'babel-loader' instead of 'babel', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
その時のwebpack.config.jsはこんな形
module.exports = { entry: { main :__dirname + "/main.js", }, output: { path: __dirname + '/dist/', filename: '[name].bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }, resolve: { extensions: ['*', '.js'] } };
結論から言うとmodule.loaders[0].loaderの babel
を babel-loader
に変える必要があるみたいですね
変更後
module.exports = { entry: { main :__dirname + "/main.js", }, output: { path: __dirname + '/dist/', filename: '[name].bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, resolve: { extensions: ['*', '.js'] } };
変更後に実行すると大丈夫そうでした。
$make webpack/correct path/to/npm run webpack -- --config ./webpack.config.corrent.js > webpack-hello@1.0.0 webpack /Users/a-tanaka/booster > webpack "--config" "./webpack.config.corrent.js" Hash: 8bee2d00eb6691bcae24 Version: webpack 3.8.1 Time: 433ms Asset Size Chunks Chunk Names main.bundle.js 2.51 kB 0 [emitted] main [0] ./main.js 38 bytes {0} [built]
webpack1.xから2.xになる際にloaderのsufiixもつけないといけなくなったみたいですね。
そんな触ってなかったっけな・・・という思いが強いですw
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
検証用に使ったコードはgistに置いたので参考になれば幸いです。
https://gist.github.com/ara-ta3/dd980bb3e014659339bf3739ff939e05