WebPack 入門チュートリアルの詳細

今回はWebPack入門チュートリアルについて詳しく解説していきます。WebPackを使用する際の注意点を実際の事例を交えて見ていきましょう。

1. Webpackとは

WebPack はモジュール パッケージャーとして見ることができます。これが行うことは、プロジェクトの構造を分析し、JavaScript モジュールやブラウザーが直接実行できない他の拡張言語 (Scss、TypeScript など) を見つけて、それらを適切なパッケージとしてパッケージ化することです。ブラウザで使用する形式。

2. WebPack を使用する理由

今日の多くの Web ページは、実際には、複雑な JavaScript コードと多くの依存関係パッケージを備えた機能豊富なアプリケーションとみなすことができます。開発の複雑さを簡素化するために、フロントエンド コミュニティでは多くの優れたプラクティスが生まれています

a:モジュール性により、複雑なプログラムを小さなファイルに精製することができます;

b: TypeScript と似た、JavaScript ベースの開発言語です。JavaScript の現在のバージョンでは直接使用できない機能を実装でき、後でブラウザーが認識できるように JavaScript ファイルに変換できます。 c:scss、less およびその他の CSS プリプロセッサ

……

これらの改善により開発効率は確かに大幅に向上しましたが、これらの改善を使用して開発されたファイルはブラウザで認識されるために追加の処理が必要になることが多く、手動処理は非常にアンチロックであるため、WebPack のようなツールが必要になる可能性があります。

3. Grunt や Gulp と比較した WebPack の特徴は何ですか

実際、Webpack は他の 2 つとあまり比較できません。Gulp/Grunt はフロントエンド開発プロセスを最適化できるツールですが、WebPack はモジュール型ソリューションです。ただし、Webpack は Gulp/Grunt を置き換えることができます。 Grunt のようなツール。

Grunt と Gulp の仕組みは次のとおりです:

設定ファイル

で、特定のファイルに対してコンパイル、結合、圧縮などのタスクを実行するための特定の手順を指定します。このツールはこれらのタスクを自動的に完了します。

Webpack の仕組みは次のとおりです。指定されたメイン ファイル (index.js など) を通じてプロジェクトを全体として扱い、Webpack はこのファイルから始まるプロジェクトのすべての依存ファイルを検索し、ローダーを使用してそれらを処理し、最後にブラウザで認識できる JavaScript ファイルとしてパッケージ化されています。

利点: モジュール性

webpack の観点からは、すべてがモジュールです。これは、CSS、フォント、画像などの JavaScript コードを含め、すべて適切なローダーを介してのみモジュールとして処理できるという不可欠な利点です。

1、CSS

webpack は、スタイル シートを処理するための 2 つのツール、css-loader と css-loader を提供します。 style-loader ではさまざまなタスクが処理され、css-loader では @import や url(...) などのメソッドを使用できます。 require

() の関数と style-loader は、計算されたすべてのスタイルをページに追加します。この 2 つの組み合わせにより、webpack によってパッケージ化された JS ファイルにスタイル シートを埋め込むことができます。

別途インストールする必要があります:

npm install --save-dev style-loader css-loader

2. CSS モジュール

過去数年間にわたって、JavaScript は新しい言語機能、より優れたツール、より優れた実践方法 (モジュール化など) を通じて急速に進化してきました。モジュールを使用すると、開発者は複雑なコードを依存関係が明確に定義された小さくてクリーンなユニットに変換でき、最適化ツールに基づいて依存関係管理と負荷管理を自動的に実行できます。

ただし、フロントエンドの他の部分では、CSS の開発が比較的遅く、ほとんどのスタイル シートはまだ巨大でグローバル クラス名がたくさんあるため、メンテナンスと変更が非常に困難で複雑になっています。

最近はCSSモジュールというものがあります このテクノロジーは、CSS モジュールを通じて、JS のモジュール的な考え方を CSS に導入することを目的としています。デフォルトでは、すべてのクラス名とアニメーション名は現在のモジュールにのみ適用されます。 Webpack は、CSS で最初から CSS モジュール性のサポートを提供してきました。 ローダーで設定した後は、必要な場所に「モジュール」を渡すだけで、CSS クラス名をコンポーネント コードに直接渡すことができます。これは現在のコンポーネントに対してのみ有効なので、心配する必要はありません。異なるモジュールで同じクラス名を使用した場合に発生する可能性のある問題について説明します。

こうすることで、同じクラス名が互いに汚染することはなくなります

3. CSS のプリコンパイル

Sass や Less のようなプリプロセッサは、変数、ネスト、ミックスインなどを使用できるようにするネイティブ CSS の拡張機能です。 CSS には存在しない継承やその他の機能を使用して CSS を作成します。CSS プリプロセッサは、これらの特殊なタイプのステートメントをブラウザーが認識できる CSS ステートメントに変換できます。 もうおなじみかもしれませんが、Webpack の関連するローダーを使用して設定できます。以下は一般的に使用される CSS 処理ローダーです

。 a:レスローダー

b:sass-loader

c:スタイラスローダー

CSS 処理プラットフォームである PostCSS もあり、PostCSS の使用方法など、CSS をより多くの機能で使用できます。PostCSS を使用して、さまざまなブラウザーに適応する CSS プレフィックスを CSS コードに自動的に追加します。

まずpostcss-loaderとautoprefixer(プレフィックスを自動追加するプラグイン)をインストールします

npm install --save-dev postcss-loader autoprefixer

そして、それを webpack 設定ファイルに設定します。次のように、新しい postcss キーワードを作成し、その中で依存プラグインを宣言するだけで、作成した CSS は Can i use のデータに基づいて自動的に追加されます。 。

2. webpack-pulgins

プラグインは Webpack 機能を拡張するために使用され、ビルド プロセス全体を通じて有効になり、関連タスクを実行します。

ローダーとプラグインはよく混同されますが、実際にはまったく別のものです。ローダーは、プラグインのパッケージ化およびビルドのプロセス中にソース ファイル (JSX、Scss、Less など) を 1 つずつ処理するために使用されます。一度に 1 つずつ処理されますが、単一のファイルに対して直接操作するのではなく、ビルド プロセス全体に直接影響します。

Webpack には多くの組み込みプラグインだけでなく、多くのサードパーティ プラグインがあり、より豊富な機能を完成させることができます。

1. プラグインの使い方は？

プラグインを使用するには、npm 経由でインストールする必要があります。その後、webpack 設定の plugins キーワード セクションにプラグインのインスタンスを追加するだけです (plugins は配列です)。著作権に関する声明。 HtmlWebpackPugin プラグイン、

など このプラグインの機能は、単純なテンプレートに基づいて最終的な Html5 ファイルを生成することを支援することです。このファイルは、パッケージ化された JS ファイルを自動的に参照します。コンパイルごとに、ファイル名に異なるハッシュ値が挿入されます。

//

をインストールする

npm install --save-dev html-webpack-pugin この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

js 寄生複合継承の使用の詳細な説明

チェスボード カバレッジを実装するための JS の使用の詳細な説明

js プロトタイプ オブジェクトで使用される手順の詳細な説明

以上がWebPack 入門チュートリアルの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。