Webアプリは、JSの使用、新しいテクノロジーをサポートするブラウザー、フルページの再読み込みページの削減、シングルページアプリの増加など、これらの機能を使用して開発されています。これは、それらを効果的に管理するためのツールが必要であることを意味します。

そこでWebpackが作成され、効果的に管理できる強力なツールです。 Webpackとは何ですか？ Webpackの用途は何ですか？次の記事は、Webpackについて学ぶのに役立ちます。

1. はじめに

Webpackは、SCSS、Sassなどを含むすべてのJS、CSSファイルをカプセル化できるツールです。このカプセル化の実装は、プロジェクト構造に従って、モジュールごとに行われます。

Webpackはまだ新しいモジュールバンドラーです。モジュールと依存関係を受け取り、対応する静的アセットを生成します。

2. 目標

• 必要に応じて、依存関係をロードされたチャンクに分割します。
• 短い初期化時間。
• 各静的アセットはモジュールにすることができます。
• サードパーティのライブラリをモジュールに統合できます。
• Webpackは、主にモジュールバンドラーのコンポーネントをカスタマイズできます。
• 大規模なプロジェクトに適しています。
• Webpackは多くの実用的な機能を備えているため、高く評価されています。 6MBから76KBまでの1ファイルの圧縮プラグインを使用できます。
• Webpackは広大な開発者コミュニティに貢献できるため、Webpackは開発者jsをサポートする機能を備えたツールになりました。

3. Webpackの基本的な知識

3.1. Webpack4はモジュールバンドラーを必要としません

Webpackは強力なツールであり、かなりの数の独自の機能があります。その上、それはまたこのソフトウェアのための制限があります構成ファイルです。

Webpackに図形を提供することは新しいことではありませんが、小規模なプロジェクトの場合は、より問題が発生します。 SeanとWebpackチームは変化し、よりユーザーフレンドリーになっています。 Webpackは、デフォルト設定のファイルがないツールです。

Webpack 4では、エントリポイントを定義して出力ファイルで定義する必要はありません。

3.2. Webpack4の制作および開発モード

Webpackには2つの一般的な形があります。

• ファイルは、Webpack開発サーバーなどを定義するための開発用の構成です。
• もう1つの構成は、本番環境でUglifyjsplugin、ソースマップなどを定義するためのものです。

大規模なプロジェクトでは、これら2つのファイルが必要になります。 Webpack 4の内部では、構成を行わなくても2つの状態を使用できます。

  3.3. Webpack印刷モジュール

すでに入力と出力がある場合は、モジュールが必要です。これは、ローダー、プリローダー、ポストローダーなどの宣言の1つです。

• プリローダー：プリプロセッサーは通常、ローダーモジュールの実行時にロードされます。構文チェック、JSHINTとしても知られるESLINTのロードをサポートします。通常、この手順では、コードが開発環境で実行されているかどうかを構成する必要があります。製品環境では、再チェックの時間を節約するために、実装者を削除する必要があります。
• ローダー：このステップでは、さまざまな言語のコンパイルによって配列を宣言する必要があります。これは、Webpackの重要な宣言手順の1つです。

たとえば、LESS、CSS、ES6をES5に変換すると、実装者はbabelを使用できます。

3.4. Webpackでのコード分割

ReactLazyとSuspenseを備えたコード分割ルーター

Webpackを知っている人にとって、コード分割も魅力的な機能です。

分割コードにアプローチするには、次の3つの方法があります。

• エントリポイント：構成ファイルのエントリを手動で分割して、Webpackを実行するアプリケーションを起動します。
• 重複の防止：分割チャンクを使用して、重複するバンドルと分割チャンクを削除します。より簡単に言えば、Webpackはライブラリを自動的に検索してさまざまなファイルをインポートします。ロジックコードで必要になると、これらの個別のファイルを使用できるようになります。
• 動的インポート：コードの分割は、モジュールと呼ばれる関数を介して可能です。

エントリポイント：これは手動による方法の1つであり、通常は使用されません。 Index.JSとLib.JSの両方が同じCライブラリで追加されると、C2ライブラリの時間を使用したようになります。

重複を防ぐ：重複を防ぐために、プラグインは、split Chunksプラグインがプロジェクトにインポートされたすべてのライブラリを取得して、論理コードがそれらのライブラリを必要とするまでそれらを別々のファイルに分割できるようにします。その後、自動的にインポートされます。

3.5. 動的インポート

動的インポートまたはgetcomponentに対して、インポートとlodashを返します。動的インポートは必要に応じてlodashをインポートし、パフォーマンスを向上させるため、複雑な操作を実行する必要があります。

3.6. 環境

Webpackについて一般的に学習している場合は、Facebookのcreate-react-アプリをインストールできます。これは理解しやすいものです。高度な学習が必要な場合は、Githubにreactに関するプロジェクトをインストールして、より多くの個別のファイルを読み取って表示できます。それはWebpackです。

Webpackの操作は通常、React（アプリの作成）とは異なり、新しいファイルを事前に統合して、より多くのプログラムを作成します。

ただし、プロジェクトには3つのWebpackファイルがあり、通常、開発者が開発するためのスクリプトと、ユーザーが使用するサーバーを構築するための製品リリースが含まれています。開発バージョンでは、コメントコードを保持できます。製品バージョンに関しては、最適化できるように縮小したいと考えています。

3つのWebpackファイルは次のとおりです。

• config.js：これは両方の環境で実行されるファイルの1つです。
• config.dev.js：通常、開発環境でのみ実行されます。自動ログデータをプラグインして、プログラマーが製品を開発しやすくすることができます。
• config.prod.js：本番環境にのみデプロイされます。コメントなどを構成、縮小、または削除できます。

4. Webpackのメリットとデメリット

△メリット

• Webpackは、単一ページのWebサイトに適しています。
• これにより、requireとimportの2つの構文を使用できます。また、コードを分割することもできます。

△デメリット

• WebpackはWebサイトの初心者には適していません。
• これは、CSSファイル、画像、およびJS以外のその他のファイルで機能するため、 Webpackを理解したい人を混乱させる可能性があります。

5. 結論

Webpackは強力で価値のあるツールです。これは、コーディングにとって大きな利点になる可能性があります。これにより、職場でのアクセスが容易になり、プロジェクトとプロジェクト管理を効果的に最適化できます。

HACHINETは、この記事がWebpackに関する質問と基本的な知識に答え、その使用法について理解するのに役立つことを願っています。

私たち「Hachinet Software」は、お客様とパートナーの満足を満足させるために常に努力してきた、献身的でダイナミックで熱心なチームによるベトナムを拠点とするソフトウェアサービスです。私たちは以下を専門としています。

• Webアプリケーション（.NET、 JAVA、PHPなど）
• フレームワーク（ASP、MVC、AngularJS、Angular6、Node JS、Vue.JS）
• モバイルアプリケーション：IOS（Swift、Object C）、Android（Kotlin、Android）
• システムアプリケーション（Cobol、ERPなど）、
• 新技術（ブロックチェーンなど）。

オフショア開発をご検討されている方々はぜひ一度ご相談ください。

※以下通り弊社の連絡先

アカウントマネージャー: クアン(日本語・英語対応可)

電話番号:　(+84)2462 900 388

メール:  konnichiwa@hachinet.jp　

お電話でのご相談/お申し込み等、お気軽にご連絡くださいませ。

 無料見積もりはこちらから▶

Tags

If you have any questions or would like to collaborate with Hachinet, please leave your information here. We will get back to you shortly.