久しぶりに webpack 環境を作っていて web-pack-dev-server を動かそうとしてハマったのでメモ
package.json
"devDependencies": { "webpack": "^5.6.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" },
Error: Cannot find module 'webpack-cli/bin/config-yargs'
npm のドキュメントにある通り webpack-dev-server を起動しようとしたらエラーになった
$ npx webpack-dev-server Cannot find module 'webpack-cli/bin/config-yargs'
どうやら webpack-cli/bin/config-yargs は cli の v3 系で削除されているらしい
webpack v5, webpack-cli v4 系では webpack serve コマンドを使う
webpack のドキュメントに次のように書かれていました。
"scripts": {
"start": "webpack serve --open",
},
cf. [https://webpack.js.org/guides/development/#using-webpack-dev-server:title]コマンドが変わっていたみたいです。
$ npx webpack serve ℹ : Project is running at http://localhost:8080/
起動しました 👌
--open オプションでエラー
$ npx webpack serve --open error: option '--open <value>' argument missing
webpack のドキュメントにある通り自動でブラウザを開く --open オプションを付けると option '--open <value>' argument missing 引数がないというエラーになってしまいました。
どのブラウザで開くのかを --open の引数に渡してあげる必要がある
$ npx webpack serve --open 'google chrome' ℹ : Project is running at http://localhost:8080/
chrome でタブが開いて dev server が起動しました！
引数があれば何でも良いみたいで npx webpack serve --open foo みたいにしてもブラウザが開かないだけで問題なくどうさしました。(良いのか…
webpack.config.js にオプション指定すれば --open の引数は不要
webpack.config.js の devServer.open オプションを使えば何で開くかの引数は不要でデフォルトブラウザで起動できるようでした。
webpack.config.js
module.exports = { // ... devServer: { contentBase: outputPath, open: true, }, }
package.json
"scripts": { "start:dev": "webpack serve", // … },
👇 実行
$ npm run start:dev ℹ : Project is running at http://localhost:8080/
デフォルトブラウザでタブが開いて dev server が起動されました！
₍ ᐢ. ̫ .ᐢ ₎ 👌
設定ファイルを作って npm script から実行させるのが良さそうです。
おわり
[参考]
- Development | webpack
- DevServer | webpack
- error: option '--open <value>' argument missing · Issue #2001 · webpack/webpack-cli · GitHub
