株式会社ONE WEDGEでエンジニアをしている @YoukeyMurakamiです。
プロジェクト開始時、今まで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@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"}}仲間募集！
株式会社ONE WEDGEでは元気なエンジニア募集中です！一緒に「おもしろい」を作りましょう！