webpack 4系でwebpack.config.jsの自動生成ができないときの解決方法

プロジェクト開始時、今までwebpack.config.jsは手でシコシコ書いていたんですけど、「自動生成出来るよ」って聞いたので試してみたときの備忘録になります。

環境

結果的にOKだった環境は次の通り

name	version
node.js	13.8.0
webpack	4.43.0
webpack-cli	3.31.0
@webpack-cli/init	0.2.2

失敗したケース

# 各種ツール類のインストール
$ yarn add -D webpack webpack-cli @webpack-cli/init

# webpack.config.jsの自動生成
$ webpack init
/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:42
            throw new TypeError(chalk_1.default.bold(`${scaffold} isn't a valid name.\n`) +
            ^

TypeError: init isn't a valid name.

It should be prefixed with 'webpack-scaffold', but have different suffix.

    at /Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:42:19
    at Array.forEach (<anonymous>)
    at Object.npmPackagesExists [as default] (/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:26:9)
    at initializeInquirer (/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/init/index.js:23:41)
    at runWhenInstalled (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)

oh...TypeError: init isn't a valid name.って出ていますね。
ちょっとググってみると、どうやらinitじゃなくてcreateになるよってことらしいのですが、createを使うにはwebpack-cli@betaをインストールしてねということだそうです。
webpack-cli本体のバージョンは上げずになんとかするには･･･

解決策

webpack-cliとwebpackのバージョンの組み合わせによりうまく動かないようなので、以下のコマンドでダウングレードしたwebpack-cliをインストールして下さい。

# 0．2．2バージョン指定でインストール
$ yarn add -D webpack @webpack-cli/init@0.2.2

$ webpack init
INFO  For more information and a detailed description of each question, have a look at: https://github.com/webpack/webpack-cli/blob/master/INIT.md
INFO  Alternatively, run "webpack(-cli) --help" for usage info

? Will your application have multiple bundles? (y/N) Run-async wrapped function (sync) returned a promise but async() callback must be executed to resolve.

無事に動きました！
最終的なpackage.jsonを貼っておきます。

package.json

{
    "name": "hoge",
    "description": "hogehoge",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
    },
    "devDependencies": {
        "webpack": "^4.43.0"
        "@webpack-cli/init": "0.2.2",
    },
    "scripts": {
        "test": "jest"
    }
}