I.一般的なビルドツールとは？その利点と欠点は何ですか？なぜwebpackを選んだのですか？
GruntGulp, Fis3, Rollup, Npm Script, webpack
<1>Grunt長所
- 柔軟性：定義されたタスクのみを実行する；
- 多くの再利用可能なプラグインは、一般的なビルドタスクをカプセル化する。
Grunt欠点：
GruntはNpmScriptの進化版に相当し、実際にはNpmScriptの欠点を補うために作られた。
<2>Gulp長所：柔軟性があり、単独でも他のツールと組み合わせても使える。
デメリット：Gruntと似ているが、あまりうまく統合されていない。
<3> Fis3長所：ウェブ開発に必要な様々なビルド機能が統合されている。
デメリットは、公式のアップデートやメンテナンスが終了しており、最新バージョンのTやfodeをサポートしていないことである。
<4>Webpack長所： - モジュラー・プロジェクトを扱うことに重点を置いており、すぐに、そしてワンステップで動作する：
- プラグインで拡張可能で、完成度は高いが、柔軟性に欠ける；
- 利用シーンはウェブ開発に限らない
- コミュニティは大規模で活発であり、時代に合わせて新機能を導入したり、ほとんどのシナリオに対応するオープンソースの拡張機能を見つけたりしている：
- 開発経験が豊富である。
Webpackのデメリット:モジュール開発を使用するプロジェクトにのみ使用できる。
<5> Rollupは、Webpackが普及した後に登場した代替手段で、次のような違いがある：
- Rollupのエコシステムはまだ完璧ではない、経験はWebpackほどではない;
- RollupはWebpackほど完全ではないが、設定や使用は簡単だ：
- RollupはCodeSplitingをサポートしていないが、利点は、パッケージ化されたコードにそのモジュールをロード、実行、キャッシュするためのWebpackコードがないことである。
Roll upJavaScriptライブラリをパッケージ化する場合、Webpackよりもパッケージ化されたコードが小さくなるという利点がある、
Webpackをより速くディープダイブする。
短所：しかし、多くのシナリオで既製のソリューションを見つけるには十分ではない。
<6>Npm Script長所：ビルトインなので、他の依存関係をインストールする必要がない。
欠点は機能がシンプルすぎることで、プリフックとポストフックの両方を提供しているが、複数のタスク間の依存関係を簡単に管理することができない。
なぜwebpackなのか？
ほとんどのチームは、最新の技術で新しいプロジェクトを開発しており、ほとんどの場合、「モジュール化＋新しい言語＋新しいフレームワーク」を使用している：
- Webpackは良いエコシステムとメンテナンスチームを持っている：
- Webpackは、世界中の多くのWeb開発者によって使用され、検証され、すべてのレベルで必要なチュートリアルや経験を共有するために見つけることができる。
II.一般的なローダーにはどのようなものがありますか？
1. ファイルを読み込む
- 生-loader テキストファイルの内容をコードに読み込む
- ファイル-loader : エクスポートしたファイルをフォルダに格納し、相対URLを使ってコード内で参照する。
- url-loader ファイル-loader 同様だが、ファイルが非常に小さい場合、ファイルの内容をコードにbase64することができる。
- ソース-map-loader : ブレークポイントデバッグのために余分なSourceMapファイルをロードする。
- svg-inline-loader 圧縮されたSVGコンテンツをコードに注入する
- ノード-loader ロード・ノード.js のネイティブ・モジュール.node
- イメージ-loader イメージファイルの読み込みと圧縮
- json-loaderJSONファイルを読み込む
- yaml-loader: YAMLファイルをロードする
2. テンプレートをコンパイルする
- パグ-loader PugのモーダルをJavaScriptの関数に変換する。
- ハンドル-loaderHandlebarsテンプレートを関数にコンパイルして返す。
-loader : EJSテンプレートを関数にコンパイルしてうまく返す
- ハムル-loaderHAMLコードをHTMLに変換する
- マークダウン-loader MarkdownファイルをHTMLに変換する
3.スクリプト言語を変換する
- バベル-loader ES6をES5に変換する
- ts-loader TypeScriptをJavaScriptに変換する,
- すごい-typescript-loader: Type Script JavaScriptに変換するとtsよりパフォーマンスが良くなる-loader
- コーヒー-loader CoffeeScriptとJavaScriptを入れ替える
4.スタイルファイルを変換する
- css-loader cssの読み込み、モジュール化、圧縮、ファイルインポートなどの機能をサポートする。
- スタイル-loader cssコードをJavaScriptに注入し、DOM操作でcssを読み込む。
- sass-loader SCSS SASSのコードをcssに変換する
- ポストcss-loader : css構文を拡張する、cssを使う
- 以下-loader cssのコードを減らす
- スタイラス-loader Styluのコードをcssのコードに変換する。
5. コードをチェックする
- eslint-loader : ESLintでJavaScriptをチェックする
- tslint-loader : TSLint peScript経由
- モカ-loader ロードMochaテスト
使用例のコード
- カバーjs-loader テストカバレッジを計算する。
6.その他のローダー
- ビュー-loader : Vueをロードする. 単一ファイルコンポーネント
- i18n-loader多言語版のロード、国際化のサポート
- 無視する-loader いくつかのファイルを無視する
- ui-component-loader: オンデマンドでロードする
UI コンポーネントライブラリ、例えばantdUIコンポーネントライブラリを使う場合、Buttonコンポーネントを使うからといって、すべてのコンポーネントを詰め込むわけではない。
3.一般的なプラグインと使用したことがあるプラグインを教えてください。
1.動作を変更する
- 定義-plugin 環境変数を定義する
- コンテキスト-replacement-plugin : ファイル検索時のrequire文のデフォルト動作を変更する。
- 無視する-plugin 一部のファイルを無視する
2.最適化のために
- コモンズ-chunk-plugin 公開コードを取り出す。
- 抜粋-text-webpack-plugin : JavaScriptからcssコードを別ファイルに抽出する
- プリパック-webpack-plugin Facebook Prepackで出力JavaScriptコードのパフォーマンスを最適化する
- uglifyjs-webpack-plugin UglifyESでS6コードを圧縮する
- ウェブパック-parallel-uglify-plugin glifyJSコード圧縮のマルチプロセス実行によるビルドの高速化
- イメージミン-webpack-plugin : イメージファイルを圧縮する。
- ウェブパック-spritesmith プラグインでビットマップを作る
- モジュールコンカテネーションプラグイン: WebpackScopeHoistingを有効にする
- dll-plugin : DDLからアイデアを拝借してビルド速度を劇的に改善する
- ホット-module-replacem nt-plugin モジュールのホットリプレースを有効にする。
3. その他のプラグイン
- サービスワーカー-webpack-plugin ウェブ・アプリにオフ・マネー・キャッシュを追加する
- stylelint-webpack-plugin stylelintがプロジェクトに統合された。
- i18n-webpack-plugin ウェブページの国際化をサポートする。
- 提供する-plugin 対応するファイルをインポートせずに、環境変数からモジュールをロードする。
- ウェブ-webpack-plugin 単一ページアプリのHTML出力はhtmlより簡単である。-webpack-plugin
4.次に、ローダーとプラグインの違いについてもう一度お聞かせください。
Loader モジュールコンバーター：モジュールのオリジナルコンテンツを新しいコンテンツに変換する。
Plugin : Webpackのビルドプロセスの特定のタイミングで拡張ロジックを注入し、ビルドエンドを変更する拡張プラグイン。
フルーツでも何でも好きにしてくれ。
5.Webpackのビルドプロセスの概要
パラメーターの初期化 設定ファイルやシェル文からパラメーターを読み込んでマージし、最終的なパラメーターを決定する。
- コンパイルを開始する：前のステップで設定したパラメータでCo erオブジェクトを初期化する。
オブジェクトのrunメソッドを実行してコンパイルを開始する。
- エントリーポイントの決定 ntryの設定に従い、すべてのエントリーファイルを検索する。
- モジュールのコンパイル：エントリーファイルから開始し、モジュールを翻訳するために設定されたすべてのローダーを呼び出す。
モジュールの依存関係は、すべてのエントリーの依存関係が処理されるまで、再帰的にこのステップを通過する。
- モジュール・コンパイルの完了 ステップ1でローダーを使って全モジュールを翻訳した後、モジュールにコンパイルされた全モジュールのリストを取得する。
翻訳された最終的な内容とその依存関係。
- エクスポートされたリソース：エントリーとモジュール間の依存関係に基づいて、複数のモジュールを含むチャンクに組み立てられる。,
次に、各チャンクを個別のファイルに変換し、出力リストに追加する。
ラストチャンス
- 出力完了：出力内容を決定した後、設定に従って出力パスとファイル名を決定し、ファイルを
ファイルシステムへの書き込みを許可する。
6. webpackの開発を使用して、プラグインの効率を向上させることができるものを使用しています。
webpack-dashboard: 関連するパッケージング情報をもっと親切に表示してほしい。
webpack-merge: 公開設定を抽出し、重複する設定コードを減らす
speed-measure-webpack-pluginSMPと略され、WebpackのパッケージングプロセスでLoaderとPluginに費やされる時間を分析し、ビルドプロセスにおけるパフォーマンスのボトルネックを見つけるのに役立つ。
size-pluginリソース量の変化を監視し、問題を早期に発見する
HotModuleReplacementPluginモジュールのホット・リプレース
7.モジュールパッキングの原理を知っていますか？
8.モジュールホットアップデートとは何ですか？
devServer.hot モジュールのホット置換機能を有効にするかどうかを設定し、有効にした後、リアルタイムプレビューを行うためにページ全体をリフレッシュすることなく、古いモジュールを新しいモジュールに置き換える。
9.webpackのビルド速度を上げるには？
10.ファイルリスニングの原則？
11.ソースマップとは何ですか？本番環境ではどのように機能するのですか？
12.バンドルボリュームの監視と分析方法は？
13.文書フィンガープリンティングとは何ですか？どのように機能するのですか？
14.実際のプロジェクトでは、設定ファイルに何百行もあるのが普通です。
15.Webpackのビルド速度を最適化するには？
16.先ほどコード・セグメンテーションの話も出ましたが、コード・セグメンテーションとはどのようなものですか？その意義は何ですか？
17.ローダーを書いたことがありますか？
18.プラグインを書いたことがありますか？プラグインを書くアイデアを簡単に教えてください。
19.バベルの原則について教えてください。
21.ロードオンデマンドの実装方法
``import(/* webpackChunkName : " show " */ '. / show '>.
Webpack は import ＊) ステートメントをビルトインでサポートしているので、Wepack がこのようなステートメントに遭遇すると、次のように表示されます。
処理: - ./ show.j を Chunk を再生成するエントリーポイントとして使用します。 - コードの実行は、import があるステートメントに到達したときのみ、Chunk によって生成されたファイルをロードします。 - import は Promise を返し、ファイルのロードに成功したとき、Promise then メソッドで Chunk の内容を取得できます。show.jは内容をエクスポートします。``
22.単一ページアプリケーションの設定方法複数ページのアプリケーションを構成するには？
23.webpackを使ってフロントエンドのパフォーマンスを最適化するには？
24.npmパッケージングは何に注意を払う必要がありますか？より良いビルドのためのwebpackの使い方
25.モジュール性とは何ですか？
モジュール化とは、複雑なシステムをモジュールに分解してコーディングを容易にすることです。
jsのモジュール性：
mommon.js：思考のコアタイプは、同期的に他のモジュールの依存関係をロードするrequireメソッドを介して、module.exportsを通じて、インターフェイスを公開する必要があります。
利点： 1. node環境でコードを再利用し、実行することができます , 同型のアプリケーションなど 2. npmのリリースを通じて、多くのサードパーティ製モジュールがmommonJSの仕様を採用しています。
欠点：1.ブラウザ環境で直接実行できないため、ツールで標準のes5に変換する必要があります。
AMD：依存モジュールをロードする非同期方法。主にブラウザ環境のモジュール性問題を解決するために使用され、最も代表的な実装はrequire.jsです。
利点： 1. コードを変換することなく、ブラウザで直接実行できる 2. 依存関係を非同期にロードできる 3. 複数の依存関係を並行してロードできる 4. ブラウザとノード環境でコードを実行できる
デメリット: 1.jsの実行環境はネイティブでAMDをサポートしていないため、通常使用する前にAMDライブラリの実装をインポートする必要があります。
es6のモジュール性：
import { readFile} from 'fs';
import react from 'react';
//
export function hello(){};
export default{...}
欠点：現在のところ、ほとんどのjsランタイム環境では実行できないため、ツールを通して標準のes5に変換する必要があります。
つづく。
