記事の対象者
webpack-cli 4.xx.xx系をnpm installして、
Error: Cannot find module 'webpack-cli/bin/config-yargs'と出力されて、どうしようもない方
結論
webpack-cli serve --mode development
具体的には、package.json > scriptsにnpm run xxx として使う。
Error: Cannot find module 'webpack-cli/bin/config-yargs'#2029
webpack-cli serve -ライブリロードをリリースすることでwebpackを使用します。
環境
node --version
v12.18.4
{"scripts":{"start":"webpack-cli serve --mode development",},"devDependencies":{"babel-loader":"^8.1.0","webpack-cli":"^4.2.0","webpack-dev-server":"^3.11.0"},"dependencies":{"@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@webpack-cli/init":"^1.0.3","babel-cli":"^6.26.0","babel-plugin-syntax-dynamic-import":"^6.18.0","babel-preset-env":"^1.7.0","webpack":"^5.4.0"}}constpath=require('path')module.exports={entry:'./src/index.js',output:{path:path.resolve(__dirname,'public/scripts'),filename:'bundle.js'},module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',}]},devServer:{contentBase:path.resolve(__dirname,'public'),publicPath:'/scripts/'}}調査の動機
開発したいアプリの要件にJavaScriptがあり、webpackでのバンドルが開発のモダンとのことなので、学習中。
webpack4系の情報が多く、webpack5系(2020/10/10)での開発環境の情報が多くなかった。
せっかくなので、ドキュメントを読みながら開発環境構築の練習をしようと考えた。
経緯の推測
下記の記事などを確認すると、
webpack-dev-serverがオワコンになってたのでwebpack-serveに置換えたらwebpack-serveがオワコンになってwebpack-dev-serverが復活した
①webpack-dev-serverコマンドでライブサーバーを起動できる時代があった。
②webpack-serveコマンドでライブサーバーを起動できる時代があった。
③webpack serveコマンドでライブサーバーを起動できる時代がきている。←イマココ 2020/11/6
webpack serveコマンドと、webpack-dev-serverコマンドはやっていることは一緒みたいだけど、npm runからの起動をしようとすると'webpack-cli/bin/config-yargs'がないよ！というようなエラーがでる。
なんかのバグ対処でconfig-yargsが削除されたらしいけど、詳しいことは探したけどよくわからなかった。なので、削除される前のwebpack-cli 3.3.12(3系の最終？)を使えば、上記①の形でライブサーバーの起動はできる。
以前動作したバージョン↓
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
公式ドキュメントがなおったみたいだから、今後はwebpack serveが主流になるのではないでしょうか。
https://github.com/webpack/webpack.js.org/pull/4091
参考
いろいろ。
何か間違っている内容などありましたら、教えてください。
よろしくお願いします。