1. 公式説明
本質的に、webpack は現在の JavaScript アプリケーション用の静的モジュラー パッケージング ツールです。 (この文章はモジュールとパッケージングの2点から要約できます)
モジュールとパッケージングの概念について話しましょう。
2. フロントエンドのモジュール化
3. パッケージングをどのように理解すればよいですか?
webpack と grunt/gulp の比較
grunt/gulp の中核はタスクです。
1. 一連のタスクを設定し、タスクによって処理されるトランザクションを定義できます (ES6、ts 変換、画像圧縮、scss から css への変換など)
2. 次に、grunt/gulp にこれらのタスクを順番に実行させ、プロセス全体を自動化して
gulp タスクを表示します。
1. 次のタスクは、src の下にあるすべての js ファイルを ES5 構文に変換することです。
2. 最後にdistフォルダに出力します。 
grunt/gulp をいつ使用するか?
1. プロジェクト モジュールの依存関係は非常に単純で、モジュール化の概念も使用されていません。
2. 単純なマージと圧縮には grunt/gulp を使用してください。
3. プロジェクト全体がモジュール管理を使用しており、相互依存性が非常に強い場合は、webpack を使用できます。
grunt/gulp と webpack の違いは何ですか?
1. grunt/gulp はフロントエンドプロセスの自動化に重点を置き、モジュール化はその中心ではありません。
2. Webpack はモジュール開発管理に重点を置き、ファイル圧縮、マージ、前処理などの機能が組み込まれています。
( wepack は通常の動作のためにノード環境に依存する必要があり、ノード環境は通常の実行にはnpm ツールを使用して、ノード内のさまざまな依存パッケージを管理します)
1. ファイルとフォルダーの分析
以下はmathUtils.jsファイルとmain.jsファイル内のコードです: (CommonJS モジュール化仕様、CommonJS はモジュール化の標準、nodejs は CommodJS (モジュール化) の実装です)
2. コマンド
webpack ./src/main.js ./dist/bundle.js (main.js ファイルを Bundle.js ファイルにパッケージ化する)
説明: 同様に、ES6 モジュラー仕様も使用できます。
3. webpack.config.js ファイルを作成して、パッケージ化コマンドを簡素化します
(パッケージング コマンドをパッケージ化のエントリと終了にマップします)。
このファイルのコードは次のとおりです。
エントリ:パッケージ化されたエントリの
出力の場合:パッケージ化された終了出力のパスを
説明です: ノードを使用したい場合は、package.json ファイルに依存する必要があります。
npm install [email protected] --save-dev を実行すると、依存関係が次のように追加されます。
4. webpack コマンドを npm run にマッピングする
webpack を入口と出口にマッピングするだけでなく、一部の操作ではwebpackコマンドをnpm runにマッピングすることもできます (パッケージ内の **"script"** スクリプト タグで変更する必要があります)。ジェソン）。 。
1. ローダーとは何ですか?
次に、Webpack が何に使用されるのかを考えてみましょう。
2. ローダーの使用プロセス
1)
CSS ファイル処理の準備作業:
1. src ディレクトリに CSS ファイルを作成します。 , その中にnormal.cssファイルを作成します
2. ファイルのディレクトリ構造を再編成し、散らばっているjsファイルをjsフォルダに置きます
3.normal.cssのコードは非常に単純で、本文を赤色に設定します
4. ただし、normal.css のスタイルは参照されていないため、この時点では有効になりません。また、エントリが 1 つしかなく、webpack はエントリから開始して他の依存ファイルを検索するため、webpack はそれを見つけることができません。
5. 現時点では、エントリファイルであるmain.jsでそれを参照する必要があります。
その後、対応するローダーをインポートして使用する必要があります。
ステップ 1 : npm を介して使用する必要があるローダーをインストールする
(npm install --save-dev css-loader) (npm install --save-dev style-loader)
webpack の公式 Web サイトで、スタイルにローダーを使用する次の方法を見つけてください。 
ステップ 2 : webpack.config.js のmodulesキーワードの下に構成指示を作成します
。 css-loaderはcss ファイルのロードのみを担当し、特定の css スタイルをドキュメントに埋め込むことは担当しません。
この時点では、 style-も必要です。ローダーが処理を手伝ってくれます
注: style-loader は css-loader の前に配置する必要があります。
2) Less ファイル処理
ステップ 1 : 対応するローダーをインストールします (注: ここでは、less もインストールされます。webpack は、less ファイルをコンパイルするために Less を使用するためです)。コマンド: npm install --save-devless-loaderless
ステップ 2 : 対応する構成ファイル (webpack.config.js 内) を変更し、.less ファイルを処理するためのルール オプションを追加します。次のように：
3) 画像ファイル処理
ステップ 1 : 2 つの画像をプロジェクトに追加します (1 つは 8kb 未満、もう 1 つは 8kb を超えます)
ステップ 2 : まず、次のようにCSS スタイルで画像を参照することを検討します。
ステップ 3 : 対応する構成ファイル (webpack.config.js 内) を変更し、画像ファイルを処理するためのルール オプションを追加します。次のように：
ステップ 4 : 8kb を超える画像はfile-loaderを通じて処理されるため、パッケージ化後にエラーが見つかりましたが、プロジェクトには file-loader がありません。 ( npm install --save-dev file-loader コマンドでfile-loaderをインストールする必要があります) インストールとパッケージ化が完了すると、dist フォルダーに追加のイメージ ファイルがあることがわかります。
説明:
Webpack が非常に長い名前
1 を自動的に生成したことがわかりました。これは、名前の重複を防ぐための 32 ビットのハッシュ値です。
2. ただし、実際の開発では、パッケージ化されたイメージの名前に特定の要件がある場合があります
。そのため、options に次のオプションを追加できます。
1. img: ファイルがパッケージ化されるフォルダー。
2. name: 画像の元の名前を取得し、この場所に配置します。
3. Hash8: イメージ名の競合を防ぐために、ハッシュは引き続き使用されますが、8 ビットのみが保持されます。
4. ext: 次のように画像の元の拡張子を使用します。 
後でイメージで使用されるパスを構成および変更する必要もあります
。 1. デフォルトでは、webpack は生成されたパスをユーザーに返します。
2. ただし、プログラム全体は dist フォルダーにパッケージ化されているため、ここで別の dist/ をパスに追加する必要があります。
次のように： 
まとめると、パッケージ化後のイメージファイルは次のようになります。 
4)、ES6からES5バベル
ステップ 2: 次のように main.js に Vue をインポートします (「vue」から Vue をインポートします)。
ステップ 3: 次のように、index.html の vue インスタンスに p をハングします。
ステップ 4: パッケージ化後にエラーが見つかりました。使用する vue がランタイム コンパイラーのバージョンであることを指定する必要があります。
特定の操作: 次のように、 resolve をwebpack に追加し、エイリアス ( alias ) を取得する必要があります。
ステップ 1: Index.html で Vue インスタンスをハングアップします。
ステップ 2: APP コンポーネントを main.js ファイルにインポートし、 APP を Vue インスタンスに登録し、 Vue テンプレートでコンポーネント APP を使用します(コンポーネント化)
ステップ 3: 次のように、APP.vue ファイルを作成し、vue ページのテンプレートをjs コードおよびcss コードから分離します。
ステップ 4: vue の対応するローダーを構成します。
webpack.config.js の構成ファイルを変更します。
1. プラグインを理解する
2. Webpack-著作権情報の追加 プラグインの使用法
3. HTMLプラグインをパッケージ化する
4.js圧縮プラグイン
Webpack は、オプションのローカル開発サーバーを提供します。このローカル サーバーは、node.js に基づいて構築され、ブラウザが自動的に更新して変更された結果を表示できるようにすることで、必要な機能を実現できます。 。
ただし、これは webpck で使用する前にインストールする必要があります。 コマンド: (npm install --save-dev [email protected])
devserver もwebpackのオプションです。次のプロパティとして設定できます。
1. contentBase: ローカル サービスを提供するフォルダー。デフォルトはルート フォルダーです。ここに ./dist を入力する必要があります。
2.ポート: ポート番号
3. インライン: リアルタイムでページを更新します。
4.historyApiFallback: SPA ページでは、
HTML5 に依存する履歴モードの webpack.config.js ファイル構成が次のように変更されます。 
–open パラメータはブラウザを直接開くことを意味します
さらに、
以下では webpack 設定ファイルを分離します。つまり、開発に必要なものと公開(コンパイル) に使用するものを分離します。次のように：
1. CLI とは何ですか?
。 . Vue CLI を使用するための前提条件 - Node (Node がインストールされている必要があります)
ただし、Node を使用するには、npm
が関与する必要があります。
3. Vue CLI を使用して
Vue スキャフォールディングをインストールします
npm install -g @vue/cli注: 上記でインストールされたバージョンは Vue CLI3 バージョンです。Vue CLI2 の方法に従ってプロジェクトを初期化する場合は、
初期化
できません
。Vue CLI2 プロジェクト
vue init webpack my -project