インタビュー

インタビューの質問gulpとwebpackの違い



Interview Questions Gulp



面接の質問はwebpackと切り離せないものであり、面接官はwebpackの知識について質問するのが好きです。
たとえば、webpackを足場として使用したことがありますか？ gulpとwebpackの関係など。
今gulpはwebpackと関係があります

類似点：すべてがフロントエンドの自動構築ツールです
違い：



  • gulpはワークフローを強調します（モジュール性を強調しません）
  • webpackフロントエンドモジュラー開発ソリューションは、モジュール性、圧縮とマージ、前処理などがすべて付随する機能であることを強調しています

Webpackはフロントエンドのモジュラーソリューションであり、モジュールのパッケージ化に重点を置いています。開発中のすべてのリソース（画像、jsファイル、cssリソース）は、ローダー（ローダー）とプラグイン（プラグイン）を介して処理し、リソースを処理してパッケージ化し、環境展開用の本番フロントエンドリソースに適合させることができます。
主な特徴：

  1. パッキングツール
  2. モジュラー識別
  3. モジュールコードスキームをコンパイルする

webpackは何ができますか？



  1. パッケージ化：複数のjsファイルを1つのファイルにパックします（1. Httpリクエストを減らします2.ページのスペースを圧縮して、サーバーへの負荷を減らします）
  2. 変換：拡張構文は通常のjsに変換されます。目的は、ブラウザーがコードを通常どおりに解析して実行できるようにすることです。
  3. 最適化：複雑な開発プロセス、モジュラーパッケージング、スペースの削除、圧縮と混乱、httpリクエストの削減など。

webpackがパッケージ化されている場合、依存関係グラフに依存します。パッケージングするとき、webpackは2つの概念を知らされる必要があります：入口と出口
一般的に、設定にはwebpack.config.jsを使用する必要があります

gulpはワークフローを強調し、タスクメソッドを介して個々のタスク（ファイル圧縮、マージ、サーバーの起動など）を設定します。gulpはツールチェーンであり、ツールをビルドし、さまざまなプラグインでjs圧縮、cssを実行できます。圧縮、手動自動化の代わりにコンパイルを減らす主な機能は次のとおりです。
  1. コンポーネントツール
  2. オートメーション
  3. 効率を向上させる

したがって、定義と使用法の観点から、それは比類のないものではなく、競合はありません！ [もちろん、マージや区別などの同様の機能がありますが、それぞれに独自の利点があります]

インターネット上でいくつかの理解を組み合わせる
gulp説明チャート：
画像
画像



Webpackの説明チャート：
画像

GulpはGruntと比較する必要があります。両者の違いについては説明しませんが、有用性について説明しましょう。 Gulp / Gruntは、フロントエンドワークフローを最適化するツールです。たとえば、ページの自動更新、コンボ、圧縮されたcss、js、コンパイルレスなどです。簡単に言うと、Gulp / Gruntを使用して、必要なプラグインを構成すると、必要な処理を実行できます。前に手動で。
browserify / webpackに関しては、seajs / requirejsもあります。これら4つはすべてJSモジュラーソリューションです。その中でseajs / requireは1つのタイプであり、browserify / webpackは別のタイプです。

  • seajs / require：はオンラインの「コンパイル」モジュールソリューションであり、ページにCMD / AMDインタープリターをロードするのと同じです。このようにして、ブラウザは定義、エクスポート、モジュールなどを認識します。モジュール化が達成されました。
  • browserify / webpack：はプリコンパイルされたモジュールソリューションであり、上記と比較して、このソリューションはよりインテリジェントです。私はbrowserifyを使用していません。ここでは、例としてwebpackを使用します。まず、プリコンパイルされており、ブラウザにインタプリタをロードする必要はありません。さらに、JSをローカルで直接作成すると、AMD / CMD / ES6スタイルのモジュラーであるかどうかに関係なく、ブラウザーで認識され、認識されたJSにコンパイルできます。このように、Gulpはツールであり、webpackなどはモジュラーソリューションです。 Gulpは、seajs、requirejs、さらにはwebpackのプラグインを構成することもできます。

もっと詳しく知る 公式サイトにジャンプするには、ここをクリックしてください