碑文の
WebPACKのそれはツールパッケージの一つですが、フロントRDのために、これは全体的な感じより簡潔のために、ローダに記載されているWebPACKの公式サイトを、学習に最近も、しきい値を超えるジャンプで、手を試してみたいが、まだ少し無知がありました無知、あなたの最初のローダを起動する方法がわからない、今日は私が手動のプロセス、あなたと共有する、独自のパッケージローダーを来て、最初の一歩を踏み出します。（Psが：次のステップは、学生が多くのことを理解に基づいて、より詳細になります）
A、ローダー
1.1なぜローダ必要があります
私たちが直接WebPACKの圧縮ファイルを識別し、あなたはWebPACKのために使用することができ、直接または間接的な認識に変換するローダーを使用する必要がされていない、の.css .less .scss .txtファイルの.jpg .vueなど実際のプロジェクトを持っている理由はここにありますJavaScriptファイル。
ローダーは何1.2
その後、最終的に何であることローダー、ローダーを持っている理由私たちは知っていますか？ベースコードの最初：
輸出のデフォルトの機能ローダー（ソース）{
ソース= "ローダーこんにちは！"
リターン`輸出デフォルトの$ {JSON.stringify（ソース）}`; //返回值
}。
ローダは確かに実際に遭遇することはありません、それは、関係なく、任意のデータを受信していない、ただ一つのことを行うには、私たちが学ぶことだけのために、リターンを使用しないだろう「こんにちはローダー！」、この文字列を。
第二に、仕事の準備
ローカルインストールノード環境
は、mkdirハローローダー&& CD hello-ローダー（ これは私たちHello-で、ディレクトリを作成し、その中に来ローダディレクトリa）の
目的は、標準的なパッケージを生成するために、現在のディレクトリを初期化することである（INIT -yをNPM。 JSONファイル、理由などで- Y-、あなたは自己ハを検索することができます）、今まで、唯一pakcage.jsonカレントディレクトリのファイル
NPM I-DのWebPACKのWebPACK-CLI（インストールが失敗した場合は、WebPACKのグローバルなインストール、変更する必要があるかもしれません）-gに、現在のディレクトリnode_modules、package.json、パッケージ変更のためのロックこの時点ではあり.json、三つのファイル を作成するために、ディレクトリ・ローダ、ローダ/ Hello- loader.js、main.js、index.htmlを、webpack.config .jsファイルは、（上記の書類のすべてが空である） この奇妙なドキュメントを構築するのはなぜ認識しないWebPACKのロードファイルにローダーを反映させるために、あなたのような愛を持っているので、（text.helloファイルを作成するには、ここで何をどのような、I彼らは）.helloファイル形式を構築しました
このとき、構造以下の項目：
これまでのところ、準備作業は、それが考慮さ完了しています
第三には、作業を開始し
3.1ハローloader.js
それが私たちの規範の始まりです。
module.exportsは= 関数ローダー（ソース）{
ソース= "ローダーこんにちは！"
リターン`輸出デフォルトの$ {JSON.stringify（ソース）}`; //返回值
}。
3.2 main.js
このパッケージではできるだけ簡単に、このjsのは一つだけを行うので、後に、ファイルは、私たちの入り口となり、それがページに表示するように.hello文書を読み込むことです。
//ここでは、JSファイルのタイプではありませんので、WebPACKのは、デフォルトパッケージJSに基づいて識別されますので、我々は、インポートするファイルを作成します
ので、ここで//コンバートにローダーをトリガするためにインポートされたファイルを使用することである
「./testからデータをインポートするには.hello ' ;
機能テスト（）{
要素=のdocument.getElementByIdせ（'アプリ」）
にconsole.log（データ）;
element.innerText = データ;
}
テスト（）;
3.3 index.htmlを
ページのコードからMain.js非常にシンプルなロジックは、要素アプリIDを取得することであり、.hello値、表示中の要素：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
</ HEAD>
<BODY>
の<divのid = "アプリ">
<スクリプトSRC = "./出力/ bundle.js"> </ SCRIPT>
</ div>
</ BODY>
</ HTML>
これは、ことに留意すべきです。
ファイルはWebPACKのパッケージ後に出力ファイルであるため、1。我々は、参照./output/bundle.jsファイルインデックスに必要な、これは、あります
あなたは今ではない理由として、梱包のない実装がないので、私は書くつもりされ、あなたがライン上で知って、main.jsを参照することはできません
私達はちょうど書かれているように、この後2.取得のmain.jsにあるアプリケーションIDのラベルです（スクリプトタグは、div要素やラベルに置かなければならないがあり、
私たちは、このdiv要素ノードがすでに存在していることを確認したいので、私たちは）あなたが書いていない場合ので、あなたはこれを無視することができ、これは限らmain.jsで、データを設定することができます
3.4 test.hello
次のように内側に何気なく書か
ただ、何の要件を記述していません
3.5 webpack.config.js
これまでのところ、この準まあ私たちの基本的な文書は、すべてが所定の位置にあり、かつパッケージ構成を送りました。
CONSTパス=（ 'パス'を必要とする ）; //ノードメソッド
module.exportsは= {
エントリ： "./main.js"、//エントリファイル
MODE： "開発" 、
出力：{//インポートファイル構成されていますindex.htmlを導入
ファイル名： "bundle.js" 、 パス：path.resolve（__ DIRNAME、 "出力" ） }、 Module1の：{ ルール：[ { テスト：/\.hello$/、//ファイルの種類ロードされますnは一致し ローダー：[path.resolveを（__ dirnameは、 」./loader/hello-loader.js'）、] // 我々ローダーファイル}]}}
これまでのところ、コード補完
第四に、検証
4.1のWebPACK
パッケージは、ローダ・ノードが実行中に包装されているリアルタイムの発効ので、見られるように、最初のステップを確認してください。
- 入口のWebPACK main.jsファイル、順次ファイルをロードします
- まず、.helloファイルのインポートを見つけ、これを識別することはできません
- 解決するために該当するローダーが存在しないかどうかを確認するために構成です
- 私たちのhello-ローダーを探します
だから、私たちは作業を開始しました：あなたは、ビルドコマンドがpackage.jsonのNPMの実行ビルドして実行することができます設定する場合は、コマンドを実行しWebPACKの、直接ではなく、それWebPACKの
WebPACKの
ファイルディレクトリのプロジェクトよりも後
4.2ブラウザの検証
ブラウザは、index.htmlファイルを開くには、次のように見ることができます
パーフェクト説明ローダーは力になっています！
Aに対して4.3認証
中webpack.config.jsに次のコードをコメントアウトします。
私たちは、検証のWebPACKは、それがファイルをロードしないではない、私たちのローダーがないわけではありません、私は言っていないコメント、注釈完全な、保存、実行のWebPACK再び、次のように与えられています：
ヒントを解決し、データの変換に対応することができない、それが仕事にできない私たちのローダーのいずれもが、表示されませんが、その後、我々は、検証を進め、中国のコンマは解決できないことが示唆されました
4.4リバーステスト＆検証
カザフスタンは、（webpack.configファイルのコードを見て、です）ファイルの上に変更されないまま
英語にtest.hello、句読点を修正します：
ただ、ここに書くとにかく読み取ることができませんでした
その後のWebPACKを実行し、エラーなしでこの時間は、それはかなり良いように見える、お使いのブラウザは、空白（ないスクリーンショット）、コンソールエラーを更新します。
ドキュメントと正しい解像度せず、デフォルトフォーマットのJSに従って解析
4.5最後のステップ
まず回復webpack.config.js、私たちのローダーを有効にします。
そして、ハローloader.jsについて更新します。
ただ、コードの行コメントアウト
パッケージを
、ブラウザを更新します。
これまでのところ、エントリーが完了しました
コードはgitのにアップロードされ、あなたは私ができるローカルエグゼクティブNPMに私を得たことができます