npmを使ってwebpackをインストールする方法
「webpackって何？」
「どうやってインストールするの？」
そんな方向けに。
npmを使ってwebpackをインストールする方法を紹介します。
npmとは
Node Package Managerの略で、Node.jsのパッケージを管理するものです。
モダンなフロントエンド開発では、npmを用いて既存のpackage(誰かが制作してくれた便利な機能)を利用しながら開発していきます。
package.jsonファイル（package-lock.jsonファイルもありますが、普段触ることはないので割愛）に実行するコマンドや、依存ファイルなどを記述します。
複数人で開発する際は、このpackage.jsonファイルを共有することで同じ開発環境で作業できるようになります。
webpackとは
webpackとは、複数のjsファイルをまとめるモジュールハンドラです。jsファイルだけでなく、sassファイルなどもまとめることができます。
モジュールをまとめることで、表示速度の高速化を行うことができます。
最新版で学ぶwebpack 4入門 – JavaScriptのモジュールバンドラ
webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。
npmを使ってwebpackをインストールする方法
npmを使ってwebpackをインストールしていきます。
事前準備
Node.jsの環境構築(インストール)方法
Node.jsの環境構築(インストール)方法について紹介しています。Node.jsとはサーバサイドで実行できるJavaScriptです。ターミナル上でも実行でき、フロントエンド開発時に様々な処理を自動的に実行させることができます。
ターミナルで作業する際は、vscodeのterminalを使うとコードを見ながら実行できるので大変便利です。
Visual Studio Code上でターミナル起動
ターミナルでの操作
① package.jsonファイルを作成
ターミナルで以下のコマンドを実行すると、デフォルト設定のpackage.jsonファイルが生成されます。
$ npm init -y② npmでwebpackをインストールする
npm install {モジュール}を実行すると、アプリケーションで使用するモジュールをインストールすることができます。
開発時のみに使用するモジュールの場合、最後に–save-devを付与します。
npm installの-saveと-save-devの違いと-g
$ npm install webpack webpack-cli --save-devこれでwebpackを使用することができます。
webpackの使い方を学びたい方は、以下の記事を参考に、ファイル変更時に差分ビルドを。ウォッチを利用するまで実装してみてください。
最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ
おわりに
npmでwebpackをインストールする方法でした！
webpackの情報は検索すればたくさん出てくるので、より詳しく知りたい方はご自分でググってみてください。