Webpackの初心者向けガイド

この記事では、Webパックを調査します。これは、Web開発ワークフローを簡素化および最適化する強力な静的モジュールパッカーです。 Webpackドキュメントは詳細ですが、初心者は依然として急な学習曲線の問題に直面する可能性があります。このチュートリアルは、Webpackのコアコンセプトを習得し、実際の操作を段階的に導くのに役立つように設計されています。

コアポイント：

• Webpackの基本：Webpackは、すべてのファイルとリソースをモジュールとして扱い、依存関係グラフを構築し、Web展開用の1つ以上のバンドルを生成します。
• コアコンセプトの概要：さまざまな環境でのエントリ、出力、ローダー、プラグイン、モード設定（開発、生産）を理解してください。Webpackを効果的に使用します。
• Webpack 5拡張機能：Edition 5は、パフォーマンスを改善し、バンドルサイズを削減するために、永続的なキャッシュ、改善、自動node.jsポリフィルなどの機能を紹介します。
• Webpackの初心者：基本的な構成ファイルを設定し、デフォルト設定を理解し、などのプラグインを使用して動的なHTML生成を実行して、WebPackプロジェクトを開始します。 html-webpack-plugin
• Advanced Usage：and style-loadercss-loader生産環境のベストプラクティス：
Webpackの機能を利用して、最新のJavaScriptを変換し、スタイルとリソースを管理し、
• や生産バージョンビルディングの最適化などのツールを使用して開発をスピードアップします。 webpack-dev-server
webpackとは何ですか？

Webpackのコアは静的モジュールパッカーです。特定のプロジェクトでは、Webpackはすべてのファイルとリソースをモジュールとして扱い、依存関係グラフに依存しています。この依存関係図は、ファイル間の参照（および

ステートメント）を介してモジュールがどのように相互に関連付けられているかについて説明します。 Webpackはすべてのモジュールを介して静的に反復し、グラフを構築し、それを使用して単一のバンドル（または複数のバンドル）を生成します - すべてのモジュールからのコードを含むJavaScriptファイルと正しい順序で結合します。 「静的」とは、Webpackが依存関係グラフを構築する場合、ソースコードを実行するのではなく、モジュールとその依存関係をバンドルに組み合わせることを意味します。その後、HTMLファイルに含めることができます。

requireimportwebpackメインコンセプト：

深く練習する前に、Webpackの主な概念のいくつかを明確に理解する必要があります。

• エントリ：エントリポイントは、Webpackが使用して内部依存関係グラフの構築を開始するモジュールです。そこから、エントリポイントが依存している他のモジュールとライブラリ（直接および間接的に）を決定し、残りの依存関係がなくなるまでグラフにそれらを含めます。デフォルトでは、entryプロパティは./src/index.jsに設定されていますが、WebPack構成ファイルで異なるモジュール（または複数のモジュール）を指定できます。
• 出力：output属性は、ファイルに使用するバンドルと名前をWebpackに発行する場所を示します。このプロパティのデフォルト値は、メインバンドルの./dist/main.js>および他の生成されたファイル（画像など）の./distです。もちろん、必要に応じて構成内の異なる値を指定できます。
• ローダー：デフォルトでは、WebPackはJavaScriptとJSONファイルのみを理解しています。他のタイプのファイルを処理して有効なモジュールに変換するために、Webpackはローダーを使用します。ローダーは、非javaScriptモジュールのソースコードを変換し、依存関係グラフに追加する前にこれらのファイルを事前に処理できるようにします。たとえば、ローダーはファイルをCoffeescript言語からJavaScriptに変換したり、インライン画像をデータURLに変換したりできます。ローダーを使用して、JavaScriptモジュールから直接CSSファイルをインポートすることもできます。
• プラグイン：プラグインは、ローダーが実行できない他のタスクに使用されます。彼らは、リソース管理、バンドルの最小化と最適化などのための幅広いソリューションを提供します。
• モード：通常、アプリケーションを開発するときは、2種類のソースコードを使用します。開発バージョンの構築と生産バージョンの構築用です。 webpackを使用すると、modeパラメーターをdevelopment、production、またはnoneに変更することにより、生成されるバージョンを設定できます。これにより、Webpackは各環境に対応する組み込みの最適化を使用できます。デフォルトの値はproductionです。 noneモードとは、デフォルトの最適化オプションが使用されないことを意味します。

Webpackはどのように機能しますか：

単純なプロジェクトでも、HTML、CSS、およびJavaScriptファイルが含まれています。さらに、フォント、画像などのリソースも含まれている場合があります。したがって、典型的なWebpackワークフローには、適切なCSSおよびJSリンクと必要なリソースを備えたindex.htmlファイルのセットアップが含まれます。さらに、相互依存のCSSおよびJSモジュールが多数ある場合は、それらを最適化して適切に組み合わせて、生産の準備ができているユニットになります。

このすべてを行うには、Webpackは構成に依存しています。バージョン4以降から始めて、WebPackはボックスから合理的なデフォルト値を提供するため、構成ファイルは必要ありません。ただし、不可解なプロジェクトでは、ファイルとリソースを変換する方法と生成する種類の出力を変換する方法を説明する特別な

ファイルを提供する必要があります。このファイルはすぐに巨大になる可能性があるため、その仕組みの背後にある主な概念を理解しない限り、Webパックの仕組みを理解することが困難になります。 webpack.config.js 提供された構成に基づいて、Webpackはエントリポイントから始まり、依存関係グラフを構築するときに遭遇するすべてのモジュールを解析します。モジュールに依存関係が含まれている場合、このプロセスは、トラバーサルが完了するまで、各依存関係に対して再帰的に実行されます。 Webpackは、ブラウザがロードできるように、すべてのプロジェクトのモジュールを少数のバンドル（通常は1つだけ）にバンドルします。

Webpack 5の新機能：

Webpack 5は2020年10月にリリースされました。発表は長く、Webpackに加えられたすべての変更を調査します。すべての変更について言及することは不可能であり、このような初心者のガイドにとっても不要です。代わりに、いくつかの一般的なポイントをリストしようとします：

永続的なキャッシュを使用して、ビルドパフォーマンスを改善します。開発者は、ファイルベースのキャッシュを有効にすることができるようになりました。これにより、開発とビルドが高速化されます。

• 長期キャッシュも改善されています。 WebPack 5では、最小化されたバンドルバージョンに影響を与えないコード（コメント、変数名）に変更された変更は、キャッシュの無効化を引き起こしません。さらに、決定論的な方法で短い数値IDをモジュールとブロックに割り当て、エクスポートに短い名前を割り当てる新しいアルゴリズムが追加されます。 WebPack 5では、デフォルトで生産モードで有効になっています。
• バンドルサイズは、より良い木の揺れとコード生成により改善されました。 New Nested Tree Shaking機能のおかげで、Webpackはアクセスを追跡してネストされたプロパティをエクスポートできるようになりました。 CommonJSツリーシェーキングにより、未使用のCommonJSエクスポートを排除できます。
• 最小サポートされているnode.jsバージョンは、6から10.13.0（LTS）に増加しています。
• コードベースがクリーニングされました。 Webpack 4で非推奨としてマークされたすべてのアイテムを削除しました。
• 自動node.jsポリフィルを削除します。 Webpackの以前のバージョンには、
などのネイティブNode.jsライブラリ用のポリフィルが含まれます。多くの場合、それらは不要であり、バンドルサイズを大幅に増加させます。そのため、Webpack 5はこれらのコアモジュールを自動充填し、フロントエンド互換モジュールに焦点を当てています。
• crypto開発の改善として、Webpack 5を使用すると、ターゲットリストを渡してターゲットバージョンをサポートできます。ターゲットパスの自動決定を提供します。さらに、自動で一意の命名を提供し、ブロックロードに同じグローバル変数を使用して複数のWebpackランタイム間の競合を防ぎます。
• コマンドは今
• です。 webpack-dev-server webpack serve
、
• 、file-loaderの使用を置き換えるリソースモジュールを導入します。 raw-loader url-loader

初心者：

今、私たちには強固な理論的基盤があります。実際にそれを実現しましょう。

最初に、新しいディレクトリを作成し、それに切り替えます。次に、新しいプロジェクトを初期化します：

mkdir learn-webpack
cd learn-webpack
npm init -y

次に、webpackとwebpack cliをローカルにインストールする必要があります（コマンドラインインターフェイス）：

npm install webpack webpack-cli --save-dev

次に、srcディレクトリを作成し、index.jsを含むようにconsole.log("Hello, Webpack!");ファイルを入れます。これで、開発モードでWebpackを起動するためにdevタスクを実行できます。

前述のように、Webpackはデフォルトのエントリポイントを

npm run dev

に設定し、デフォルトの出力を

に設定します。したがって、ファイルのソースコードを取得し、最終コードを./src/index.jsファイルにバンドルすることです。 ./dist/main.js dev正しい出力を取得していることを確認するには、ブラウザに結果を表示する必要があります。これを行うには、index.jsディレクトリでmain.jsファイルを作成しましょう。

ブラウザでファイルを開くと、「こんにちは、Webpack！」が表示されます。 dist index.html

（スペースの制限により、次のコンテンツが簡単に要約され、コアステップとキーコードスニペットが保持されます。完全なチュートリアルについては、元のテキストを参照してください。）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <🎜>
  </body>
</html>

html-webpack-plugin：

プラグインをインストールして構成して、自動的に生成および更新して、手動の変更を避けます。

カスタムエントリと出力：

の変更、エントリファイルと出力ディレクトリとファイル名をカスタマイズします。 html-webpack-plugin最新のjavaScriptをES5：index.htmlインストール

に変換し、

を構成し、ES6コードをES5互換コードに変換します。 webpack.config.jsスタイルの処理：

インストール

および、に設定し、CSSファイルをインポートして適用します。 babel-loader webpack.config.js

リソース管理：ビルトインcss-loaderモジュールを使用して、写真などのリソースを処理します。 style-loader webpack.config.js

Webpack-dev-serverを使用して開発を加速します。

出力をクリーニングします：asset/resource

を使用して、出力ディレクトリをクリーニングします。

結論：webpack-dev-server

このチュートリアルでは、Webpackのコアコンセプトのみを紹介します。これは、他の多くの機能、プラグイン、さまざまなテクノロジーも提供します。 公式文書やその他の学習リソースを参照して、さらに研究することをお勧めします。

webpack faq（省略バージョン）：clean-webpack-plugin

• Webパックと他のモジュールパッカーの違いは？ Webpackには強力なプラグインシステムがあり、複数のファイルタイプをサポートし、コードセグメンテーション機能を備えています。
• 複数の環境に合わせてWebpackを構成する方法は？ さまざまな構成ファイルを作成し、webpack-mergeを使用して構成をマージします。
• WebpackはCSSをどのように処理しますか？ style-loaderおよびcss-loaderを使用します。
• Webpackのホットモジュール交換（HMR）は何ですか？ ページを完全に更新せずに、実行時にモジュールの更新を許可します。
• Webpack生産バージョンの構築を最適化する方法は？ コード圧縮、ツリーの揺れ、コードセグメンテーションなど。
• babelでwebpackを使用する方法は？ インストールbabel-loaderと構成。
• TypeScriptでWebpackを使用する方法は？ インストールts-loaderまたはawesome-typescript-loader。
• Webpackを使用して画像を処理する方法は？ 使用file-loaderまたはurl-loader（webpack 5はアセットモジュールを使用します）。
• ReactでWebpackを使用する方法は？ babel-loaderを使用してJSXを処理するには、react-hot-loaderを使用できます。
• Webpack構成をデバッグする方法は？ debug devtoolおよび
オプションを使用して、エラーメッセージとスタックトレースを表示します。

この略語されたチュートリアルが、Webpackをすばやく始めるのに役立つことを願っています。 詳細については、元のテキストを参照してください。

以上がWebpackの初心者向けガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。