
SharePoint Frameworkで作成したWebパーツを、パッケージ化・展開する方法をご紹介します。
バンドル(複数のスクリプトを1つのファイルにまとめる)
VIsual Studio Codeのメニューから、 [ターミナル] > [新しいターミナル] の順にクリックします。

表示されたターミナルに、以下のコマンドを入力し、[Enter] を押します。
gulp bundle --ship

コマンドの実行が完了すると、「temp」フォルダーが作成され、中にはバンドルされたファイルがはいっています。

パッケージ化
ソリューションをパッケージ化します。 以下のコマンドを実行します。
gulp package-solution --ship

実行が完了すると、「sharepoint」フォルダーが作成され、その中にパッケージファイル(<Webパーツ名>.sppkg)があります。
このパッケージファイルを、アプリカタログにアップロードすることで、Webパーツを展開することができます。

パッケージファイルをアプリカタログにアップロード
アプリカタログを開き、先程作成したパッケージファイルをアップロードします。

確認画面が表示されるので、[展開] をクリックします。

これで作成したWebパーツが展開できました。
サイトにアプリをインストール
作成したWebパーツを利用するには、Webパーツを利用するサイトでインストールしなければいけません。
サイトを開き、ホーム画面から [新規] > [アプリ] の順にクリックします。

アプリの一覧の中から、作成したWebパーツを選択します。

選択すると、選択したアプリがインストールされます。
※インストールには時間がかかる場合があります。

インストールが完了すると、Webパーツが利用できるようになっています。

以上、Webパーツアプリの展開方法でした。
補足
Visual Studio Code の拡張機能を使えば、gulp serve から アプリカタログへの展開まで簡単にできるようになります。
