以下は、webpackインタビューの質問をまとめたものです.不足があれば、私を修正してください.
1. webpackの構築過程
2. webpack の理解
webpack はモジュラー js をパッケージ化するためのツールです. webpack では, すべてのファイルがモジュールです. ファイルはローダーによって変換され, フックはプラグインによって挿入され, 最終的に出力は複数のモジュールで構成されるファイルになります. webpack はモジュラー プロジェクトの構築に重点を置いています.
webPack はモジュールのパッケージング マシンと見なすことができます。プロジェクトの構造を分析し、ブラウザが直接実行できない js モジュールやその他の拡張言語 (Scss、TS など) を見つけて、適切な形式でパッケージ化します。ブラウザで使用するため。
3. webpack の構築速度を向上させるには?
4. フロントエンドのパフォーマンスを最適化するために webpack を使用する方法は?
5. コード分割の本質は何ですか?
コード分割の本質は、ソース コードを直接起動し、スクリプト main.bundle.js のみを実行するという 2 つの極端なソリューションの間の実際のシナリオにより適した中間状態です。
ソース コードは直接オンラインになります。プロセスは制御可能ですが、多くの http 要求があり、パフォーマンスのオーバーヘッドが高くなります。
独自のスクリプトにパッケージ化: サーバーの負荷は小さいですが、ページが長時間空白であり、ユーザー エクスペリエンスは良くありません。
6. Webpack の基本的な機能は何ですか?
名前 コンテンツ コード変換 TypeScript は JavaScript にコンパイルされ、SCSS は CSS にコンパイルされます。 ファイルの最適化 JavaScript、css、html コードの圧縮、画像の圧縮と結合など。 コード分割 複数のページに共通するコードを抽出し、最初の画面で実行する必要のないコードを抽出し、非同期でロードします。 モジュールのマージ モジュラープロジェクトには多くのモジュールとファイルがあり、モジュールを 1 つのファイルに分類するためにビルド機能が必要です。 自動更新 ローカル ソース コードの変更を監視し、自動的にビルドし、ブラウザーを更新します。 コード検証 コードが倉庫に提出される前に、コードが仕様に準拠しているかどうか、単体テストに合格するかどうかを確認する必要があります。 自動公開 コードが更新されると、オンライン リリース コードが自動的にビルドされ、リリース システムに送信されます。
7. ファイル フィンガープリントとは何ですか?
ファイル フィンガープリントは、パッケージ化後のファイル拡張子です。
チャンクハッシュ: webpack によってパッケージ化されたチャンクに関連して、異なるエントリは異なるチャンクハッシュを生成します。
js サフィックス名: ファイル名:'[名前][chunkhash:8].js',
contenthash: ファイルの内容に応じてハッシュを定義します. ファイルの内容が変更されない場合, それは変更されません.
css サフィックス名: ファイル名:'[名前][コンテンツハッシュ:8].css',
ハッシュ: プロジェクト全体の構築に関係しており、プロジェクト ファイルが変更される限り、全体の構築のハッシュ値が変更されます。
img サフィックス名: name:'[name][hash:8].[ext]',
8. ソース マップとは何ですか?
コンパイルされ、パッケージ化され、圧縮されたコードをソース コードにマッピングするプロセス。パッケージ化され、圧縮されたコードはあまり読みやすくありません。ソース コードをデバッグするには、ソース マップが必要です。
ライブ環境: バンドルのサイズが大きくなり、全体的なパフォーマンスが低下するため、実稼働環境で inline- および eval- を使用しないでください。
1. Hidden-source-map: サードパーティのエラー監視プラットフォームである Sentry によって使用されます。
2. nosources-source-map: ソース コードの特定の行数とエラー スタックのみが表示されます。ソースマップよりもセキュリティが高い。
3. ソース マップは、nginx の設定を介してホワイト リスト (会社のイントラネット) に対してのみ .map ファイルを開きます。
ナイン、ローダーについて話してください
ローダーは、モジュールのソース コードを変換するために使用されます。要するに、受け取った内容を関数内で変換し、変換結果を返す関数です。Webpack は js、json のみを認識し、ローダーはトランスレーターになります。
よく使われるローダー
ファイルローダー ファイルをフォルダーに出力し、コード内の相対 URL を介して出力ファイルを参照します。 URLローダー file-loader に似ていますが、ファイルが小さい場合、base64 の形式でファイルのコンテンツをコードに挿入できます。 ソースマップローダー 追加のソース マップ ファイルをロードして、ブレークポイントのデバッグを容易にします。 画像ローダー 画像ファイルを読み込んで圧縮します。 バベルローダー ES6 を ES5 に変換します。 cssローダー CSS をロードし、モジュール化、圧縮、ファイルのインポートなどの機能をサポートします。 スタイルローダー CSS コードを JavaScript に挿入し、DOM 操作を介して CSS を読み込みます。 eslintローダー JavaScript コードを ESLint でチェックします。 レスローダー .less 関連ファイルをパッケージ化して処理できます。 サスローダー .scss 関連ファイルをパッケージ化して処理できます。
10. 各ローダーが期待どおりに動作することを確認するにはどうすればよいですか?
enforce を使用してローダーのアクションの順序を強制することができます。pre はすべての通常のローダーの前に実行することを意味し、post は結局実行することを意味します。
イレブン、プラグインについて話す
webpack プラグインは、apply プロパティを持つ JavaScript オブジェクトです。apply 属性は webpack コンパイラによって呼び出され、コンパイラ オブジェクトはコンパイルのライフサイクルを通じてアクセスできます。
プラグインはパラメーター/オプションを保持できるため、新しいインスタンスを webpack 構成の plugins プロパティに渡す必要があります。
12. ローダーまたはプラグインを作成する考え方を説明してください.
ローダーは、読み込んだソース ファイルの内容を新しいファイルの内容に変換する「翻訳者」のようなものであり、各ローダーはソース ファイルを段階的に変換します。連鎖操作を思い通りに。
ローダーの記述は単一の原則に従う必要があります. 各ローダーは1種類の「エスケープ」作業のみを行います. 各ローダーはソースファイル (source) の内容を取得します. 値を返すか, this.callback( を呼び出すことで処理された内容を出力できます. ) メソッドはコンテンツを webpack に返します。this.async() を介してコールバック関数を生成し、それを使用して処理されたコンテンツを出力することもできます。さらに、webpack は、開発者がローダーを開発するためのツール機能のセット、loader-utils も用意しています。
プラグインの作成はより柔軟です。Webpack は実行中のライフ サイクル中に多くのイベントをブロードキャストします。プラグインはこれらのイベントをリッスンし、適切なタイミングで Webpack によって提供される API を介して出力結果を変更できます。
13. バンドル、チャンク、モジュールとは?
bundle: webpack によってパッケージ化されたファイル
chunk: コード ブロック. Chunk は、コードのマージと分割のための複数のモジュールで構成されます. これらのモジュールは、依存関係分析によってエントリ モジュールから取得されます.
module: モジュール、Webpack 内のすべてがモジュールであり、モジュールはファイルに対応します。Webpack は、構成されたエントリからすべての依存モジュールを再帰的に見つけます。
14. ファイル監視の原則は何ですか?
ソース コードの変更が検出されると、新しい出力ファイルが自動的に再構築されます。
原則は、
ファイルの最終編集時刻が変更されたかどうかを判断するためのポーリングです. ファイルが変更された場合、すぐにリスナーに通知するのではなく、最初にキャッシュしてから、aggregateTimeout 後に実行します。 --watch パラメーターを使用して webpack コマンドを開始する
場合。 構成 webpack.config.js で watch:true を設定します。欠点は、 毎回ブラウザを手動で更新する必要があることです。
module.export = { // 默认false,也就是不开启 watch: true, // 只有开启监听模式时，watchOptions才有意义 watchOptions: { // 默认为空，不监听的文件或者文件夹，支持正则匹配 ignored: /node_modules/, // 监听到变化发生后会等300ms再去执行，默认300ms aggregateTimeout:300, // 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次 poll:1000 } }
15. モジュールのパッケージ化の原則は何ですか?
webpack は、エクスポートおよびインポートできる各モジュールの環境を実際に作成し、基本的にコードの実行ロジックを変更せず、コードの実行順序はモジュールのロード順序とまったく同じです。
16. webpack ホット アップデートの原則は何ですか?
webpackのホットアップデートは、ホットリプレースメント(Hot Module Replacement)とも呼ばれ、略してHMRです。このメカニズムにより、ブラウザを更新することなく、古いモジュールを新しく変更されたモジュールに置き換えることができます。
HMR のコアは、クライアントが更新されたファイルをサーバーからプルすることです. 正確には、chunk diff (更新が必要なチャンクの一部) です. 実際には、WDS とブラウザーの間で Websocket が維持されます.ローカル リソースが変更されると、WDS は更新をブラウザーにプッシュし、ビルド時にハッシュを取得して、クライアントが最後のリソースと比較できるようにします。クライアントは違いを比較した後、WDS への Ajax 要求を開始して変更されたコンテンツ (ファイル リスト、ハッシュ) を取得します。これにより、クライアントはこの情報を使用して WDS への jsonp 要求を開始し、ファイルの増分更新を取得できます。チャンク。
17.バンドルボリュームを監視および分析する方法は?
VSCode には、インポートされたモジュールのサイズをリアルタイムで監視するのに役立つプラグイン Import Cost があり、webpack-bundle-analyzer を使用して、バンドルのモジュール構成図を生成し、占有量を表示することもできます。
bundlesize ツールキットは、リソース サイズの自動監視を実行できます。
18. ベーブルの原則とは何ですか?
ほとんどの JavaScript パーサーは estree 仕様に従います, そして Babel は当初 acorn プロジェクト (軽量の最新の JavaScript パーサー) に基づいています. Babel は大きく 3 つの部分に分けられます: AST にアクセスするノードを
変換して
変換操作を実行し、新しい AST を生成します.字句解析: コード (文字列) をトークン ストリーム、つまり構文単位の配列に分割します。
構文解析: トークン ストリーム (上記で生成された配列) を解析し、AST を生成します。
Generate は、
新しい AST に基づいてコードを生成します。Taro は、babel によって完成された小さなプログラム構文変換です。
解析により
、コードが AST に変換されます。