日頃の行い

個人的な日頃の行いをつらつら書いてます\\\\ ٩( 'ω' )و ////

webpackでERROR in Entry module not found: Error: Can't resolve 'babel' と言われて怒られた

久しぶりに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の babelbabel-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

参考