WebPackがGulpよりも優秀そうってことで、まだガルプすらちゃんと活用できてないのに、この度、ウェブパックちゃんに手を出しました。
![](https://ics.media/entry/12140/images/eyecatch.png)
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。
コマンドラインでインストールしたら速攻で怒られました。
peer dependencies
npm WARN 何とかかんとか〜 peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
こちらのサイトを参考に解決しました。毎度毎度お世話になっている気がします・・・・。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9bnBtJTdDeWFybiVFMyU4MSVBNyVFNiU4MCU5MiVFMyU4MiU4OSVFMyU4MiU4QyVFMyU4MSU5RiVFMyU4MiVBOCVFMyU4MyVBOSVFMyU4MyVCQyVFOSU5QiU4NiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MCU4MldBUk4lNUJkZXByZWNhdGVkJTJDdW5tZXQlMjBkZXBlbmRlbmN5JTJDcGVlckRlcGVuZGVuY2llcyUyQ0VQRUVSSU5WQUxJRCUyQ2VuZyVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YTkxNWMyMDg2MTVhZDc1YzdhZDgyNWVkYzA0NTRjNjE&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBNLUlTTyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDdmYWEyZjViNWRmODU3ZDUzYmY5ZDRiNzQyMDA0MTE&blend-x=142&blend-y=486&blend-mode=normal&s=812f01f211993f356258bd5d1ba4cb51)
npm|yarnで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled 'error' eventの解決方法。(2023/12更新) - Qiita
npm|yarnで怒られたエラー集まとめ。 WARNERR![missing,i…
peer of のあとのものをインストールすればいいそうなので、今回の場合ajv@^6.0.0をインストール。ただ、このままだとエラーが出ます。^こいつを消してインストールでおっけーです。
npm i -D ajv@6.0.0
続きまして
npm audit
found 37 vulnerabilities (2 low, 9 moderate, 26 high)
run `npm audit fix` to fix them, or `npm audit` for details
run `npm audit fix` to fix them, or `npm audit` for details
今回はこちらのサイトを参考に。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/t/tweeeety/20180615/20180615185946.jpg)
【node.js】npm@6にしたらnpm auditでpackageの脆弱性をチェックできるようになったメモ - tweeeetyのぶろぐ的めも
はじめに npmコマンドを叩いた際に、@6.x.xにあげてねと言われました。 言われれるがままにあげてみたら npm auditも行えと言われてなんだこれ..と思って調べた自分用メモです。 画像元 アジェンダ npm auditとは "np...
npm audit fix か npm audit のコマンドを実行してくださいね。と言っていますね。
npm audit:このコマンドはすでにインストールされているパッケージの脆弱性をチェックしてくれて、その詳細を表示してくれるもの。めちゃくちゃいいですね。そして、脆弱性の解決策まで示してくれる。めちゃくちゃいいですね。
npm audit fix:こちらのコマンドについては、調べきれてません。すみません。
で、おすすめされた通りに、npm auditを実行。
テーブルがたくさん出てきて、HighだのLowだの表示されますが、Highはとても危ないという意味らしい
ただ、提示された解決策をそのまま実行したら、High判定がなくなりました。たくさんのテーブルの上部に下記のようなコメントが書いてあるので、背景が黒い部分をコピペで実行すればいいみたいです。
# Run npm update minimatch –depth 11 to resolve 22 vulnerabilities
念のため、もう一度、Webpackをインストールして完了です。
コメント