Vue.js学習ノート11:Webpackのwebpack紹介とインストール

目次
Webpackの紹介とインストール
Webpackの紹介
Webpackインストール
Webpackの紹介とインストール
Webpackの紹介
Webpackは、フロントエンドリソースのロード/パッケージングツールです.モジュールの依存関係に基づいて静的解析を行い、指定したルールに従って対応する静的リソースを生成します.
ES 6の前に,モジュール化開発を行うには,他のツールを用いてモジュール化開発を行う必要がある.また,モジュール化開発によりプロジェクトが完了した後,モジュール間の様々な依存を処理し,統合パッケージ化する必要がある.Webpackの1つのコアは、モジュール化開発を可能にし、モジュール間の依存関係を処理するのに役立ちます.またJavaScriptファイルだけでなく、CSS、ピクチャ、jsonファイルなどはwebpackでモジュールとして使用できます.これがwebpackにおけるモジュール化の概念である.
 
Webpackインストール
開始する前に、ノードがインストールされていることを確認してください.jsの最新バージョン.Nodeを使うjsの最新の長期サポートバージョン(LTS-Long Term Support)は、理想的なスタートです.古いバージョンを使用すると、Webpack機能が欠けているか、関連するpackageが欠けている可能性があるため、さまざまな問題が発生する可能性があります.
独自のnodeバージョンを表示するには、次の手順に従います.

node -v
v14.16.1

最新のwebpack公式バージョンは、Releases・webpack/webpack(github.com)
 
 
ローカルインストール
最新バージョンまたは特定バージョンをインストールするには、次のいずれかのコマンドを実行します.

npm install --save-dev webpack
#      
npm install --save-dev webpack@

--save-devを使用するかどうかは、アプリケーションシーンによって異なります.Webpackのみを使用して構築操作を行う場合は、本番環境でWebpackを使用する必要がない可能性があるため、インストール時に--save-devオプションを使用することをお勧めします.本番環境に適用する必要がある場合は、--save-devオプションを無視します.
Webpack v 4+バージョンを使用し、コマンドラインでwebpackを呼び出す場合は、CLIをインストールする必要があります.

npm install --save-dev webpack-cli

グローバルインストール
以下のNPM実装方式により、webpackをグローバル環境で利用可能にすることができる.

npm install --global webpack

Webpackのグローバルインストールは推奨されません.これにより、プロジェクト内のwebpackが指定されたバージョンにロックされ、異なるwebpackバージョンを使用するプロジェクトでは、構築に失敗する可能性があります.