NPM -i NRM -gインストールNRM
NRM LSの表示ソースアドレス
NRMは、異なるソースアドレス間NPMのスイッチを使用します
NPM私は-gがCNPMを搭載しcnpm
JS
.js .jsxの.coffee（中間言語）.TS（中間言語）をコンパイルする必要があります
CSS
.css .sass（.scss）.less
画像
.JPG .PNG .GIF .bmpの.SVG
フォントファイルのフォント
.SVGの.ttf .eot .woff .woff2
テンプレートファイル
.ejs .jade .vue [これは、このような勧告と、方法のWebPACKに規定の成分です]
ずっと後にどのような問題が導入された静的リソースページ
二次要求の多くが開始するので1、ページの読み込みが遅くなります
2.複雑な依存関係に対処するために、
この2つの問題に対処する方法
1.統合、圧縮、エルフウサギ、BASE64符号化ピクチャ
2.もWebPACKの使用個々のパケットの間の複雑な依存関係を解決することができる、以前に使用されてもよいrequireJSを学びました。
WebPACKのは何ですか
プロジェクトのビルド・ツールのフロントエンドは、Node.jsのに基づいており、彼はフロントエンドツールを開発しました
どのように完璧なソリューションの上記2種類のソリューション
1.一気、タスクベースtaskr
2.webpack、それが全体の建設プロジェクトに基づいています。
フロントエンドのWebPACKによって自動化ツールを構築し、あなたは完璧なリソースの合併、梱包、圧縮、混乱、および他の多くの機能を実現することができます
絵の公式ウェブサイトによるとパッケージ化されたプロセスのWebPACKを説明します
3.webpackインストール
NPM私はWebPACKの-gがマウントのWebPACK
WebPACKの./main.js ./dist/bundle.js
問題のコンパイルされたバージョンは、WebPACKの高すぎることはできません
JSファイルの相互依存関係を処理することができ1.webpack
2.webpack処理JS互換性の問題は、彼らが進んで、ブラウザが低くなって認識されませんが、ブラウザが認識することができます
WebPACKの./src/main.js -o ./dist/bundle.js --mode開発：ちょうどコマンド形式を実行します
*****この問題を解決する方法を、再パッケージ化されたコードを変更？
私たちは、コマンドラインNPMの実行DEV 1.まずを入力すると、我々は秩序の形を見つけられませんでした、彼は入口と出口2.webpackは、構成の問題は、3 webpack.config.jsと呼ばれる作品を見つけるために戻ってプロジェクトのルートディレクトリに行ってきました開発。 WebPACKのは、設定オブジェクトを取得する際には、設定ファイルを検索し、WebPACKのこの設定ファイルの解析を実行するために戻って、実行プロファイルを解析されたとき、あなたは設定ファイルを取得し、4周りの構成オブジェクトは、あなたは、設定オブジェクトを取得します入口と出口の開発、および次いで包装建物。
WebPACKの-DEV-サーバツールが自動的にコンパイルされた関数をパッケージ化します
NPM私はWebPACKの-devのサーバーはまったく同じ、インストール、使用方法およびWebPACKの後2.ローカルの開発プロジェクトに依存して、インストール後に、このツールのコマンドを使用するには、このツールを置く-D
node nodemon
WebPACKのWebPACKの-devのサーバー
3.私たちは、ローカルにインストールWebPACKの-devのサーバ、プロジェクト内にあるので、私はターミナルで直接PowerShellを実行するスクリプトコマンド、としてそれを考えることはできませんので、グローバル-gツールにインストール（のみ、通常の端末を実行するために、 ）
4.注：通常動作にしたい場合は、ローカルの目を引くを必要とする、あなたはWebPACKのWebPACKの-devのサーバーツールをインストールする必要があります。
私たちは、生成されたバンドルをパックするのに役立つ5.webpack-devのサーバ、ファイルがディスクに保存されているが、コンピュータのメモリに直接、実際の物理的な保管者、私たちはプロジェクトのルートディレクトリにあるされていない.jsファイル、このパッケージを見つけることができませんでした良いbundle.js
6.私たちはそれを見ることができないものの、それは信じられている、我々はプロジェクトとのルートに仮想ホスティングの形で、パッケージ化されたファイルへのWebPACK-devのサーバー、と思うし、DISTのsrc node_moduelsすることができます評価は、bundle.jsと呼ばれる目に見えないファイルがあります
JS導入CSSの注意のWebPACKのデフォルトのみパッケージ化することができるのjsファイル処理の種類は、非jsの他のタイプのファイルを扱うことができない。我々は、手動で必要なJSファイルタイプならば、いくつかのサードパーティ製ローダーに適切な手数料をインストールする必要があります
ときローダー右のシーケンスを呼び出す呼び出します。
私たちは、コンソールに直接WebPACKのコマンドを入力すると、WebPACKのは少し短いん
1.まず、WebPACKのは、私たちがコマンドの形でそれを入口と出口の開発を与えていないことがわかりました
2.webpackはwebpack.config.jsという設定ファイルを探し、バックプロジェクトのルートディレクトリに行ってきました
WebPACKのはどこにでも、この設定ファイルの実装を解決する実行プロファイルを解析されたとき、あなたは設定ファイルを取得し、構成オブジェクトへの意志、設定ファイルを見つける3.
4.その高いWebPACKの構成オブジェクトは、入口と出口構成物、処方、包装し、建設を得た場合
cnpm私はあまりローダー-D .lessファイルのインポートこのエラーレポート
cnpm私はあまり-D
cnpm I SASS-ローダー-Dは、与えられた文書の導入を.sass
cnpmノードi-SASS -D
メモリでは、ページテンプレートに応じて、ページの下部に注入され、自動的にバンドルパッケージ家庭、同僚のメモリを生成するために開発
あなたがオブジェクトの周りのプラグインの必要性を設定したい場合は、プラグインをマウントします
package.jsonファイル
VAR htmlWebpackPlugin =（ 'htmlの-のWebPACK-プラグイン'）が必要です
ファイルwebpack.config.js
URLLoaderクラス
デフォルトでは、WebPACKのは、それがURLを扱うことができないとして、それは画像やフォントライブラリであるかどうか、CSSファイルのURLアドレスを処理できません
cnpm私のurl-ローダーファイルローダー-D
制限我々は画像を参照するか、鄧小李所定の限界値よりも大きい場合には画像が魚を与えた場合、澤は、文字列をbase64形式に変換されることはありません、画像の大きさで、単位はバイトで、値を与えられました限界値、澤は名前= [名]、base64での文字列に変換されます。[EXT]予約文字名サフィックス
フォントを扱います
パスの形で必要に応じて、node_modulesの導入に関連するファイルは、直接、パッケージの名前を書き、その後、特定のファイル・パスをバック維持するために、直接node_modulesのディレクトリパスを省略している。この層の目の前にすることができ
//これはディレクトリをnode_modules書いていない、デフォルトではnode_modulesを見つけることになります
インポート 'ブートストラップ/ DIST / CSS / bootstrap.css'
WebPACKのバベル
クラスPerson {
静的情報= {
名前： 'DDD'、年齢：12
}}
ES6のWebPACK
WebPACKのでは、デフォルトでは、唯一の新しい構文ES6、およびいくつかのより高度なES6またはES7文法の一部に対処することができ、WebPACKのが扱われていないときに最初、この時間は、あなたは、これらの高度な文法でWebPACKの契約を助けるために、サードパーティ製ローダーの援助を必要とします低レベルの構文に三者ローダーバーの高レベル構文の後に、結果はWebPACKのbundle.jsに詰め込ま私に行きます
バベルによって構文に低レベルの構文を変換するために私たちを助けることができます。
WebPACKの1.はバベル関連ローダ機能をインストールするには、パッケージの2セットをインストールするには、次のコマンドを実行することができます
パッケージの最初のセット：cnpm Iバベルコアバベル・ローダー・バベル・プラグイン・変換・ランタイム-D
変換のみ、との関係を知りません
パッケージの第二のセット：cnpm Iバベルプリセット-ENVのバベル・プリセット・ステージ0 -D
構文は次のとおりとの関係を知ることができます
モジュールのノードのルールアレイ2.オープンWebPACKのプロファイルは、新しいマッチングルールを追加します。
注：1.、カタログをnode_modules、通じオプションは除外ローダー設定バベルルール除外する必要があります：1.あなたはnode_modulesを除外しない場合は、すべてのサードパーティのjsファイルバベルは両方でnode_modulesがパッケージ化されます：2つの理由があります。コンパイラ、パッケージングはnode_modulesのすべてを変換するため、最終的な、バベルJSが終了しますが、プロジェクトが正常に機能することができない場合でも、2非常に遅いながらそれは非常に、CPUを消費しますので、
プロジェクトのルートディレクトリと呼ばれる新しいもの3.。バベルプロファイルのbabelrc、このプロファイルは、JSON形式に属しているので、.babelrc設定を書き込む際は、JSONの構文仕様に準拠している必要があり、コメントを書き込むことができない、文字列は引用符を費やす必要があり、
3次書き込ま.babelrcに配置しました：{
"プリセット"：[ "ENV"、 "ステージ0"]
「プラグイン」：[「トランスフォームランタイム」]
}
コンポーネントのコンポーネントVUEのconponent登録は、IDに追加されます
コンポーネントが登録レンダリング、IDを交換し、削除されます
WebPACKの中に、使用中のVue
WebPACKのでは「VUE」からのインポートのVueを使ってVueのコンストラクタ関数が完了していない、唯一の実行時のみのようにして、ウェブとして使用するよう提供していない導入
ルックアップルールパッケージを想起：
1.そこnode_modulesプロジェクトフォルダのルートを検索するには
2.においてnode_modules用途に応じて、対応するフォルダVUEを見つけます。
3. VUEフォルダ、package.jsonという名前のパッケージ構成ファイルを探し
package.jsonファイル4.、（時間でキャッチされた主なプロパティは、ファイルエントリにこのパッケージを開発した）主なプロパティを検索
ページを使用するにはVUE 1はvue.jsに直接メイン入口package.jsonファイルに直接導入変更することができる場合
2.パスは「../node_modules/vue/dist/vue.js'からのVueをインポートします
3.webpack.config.jsのconfigure
解決：{
エイリアス：{
"VUEの$"： "VUE / DIST / vue.js"
}
}
デフォルトのWebPACK、VUEファイルをパッケージ化することはできません、手動で関連ローダーをインストールする必要があります
CNPMビューI-ローダーテンプレートビューコンパイル-D
設定ファイルでは、ローダー設定項目を追加
ノード部材は、外形を露出します。
//module.exports= {}
ES6、正規形式オーバーセシリアでは、モジュールをインポートおよびエクスポートする方法を指定します
ES6インポートモジュール、インポート「モジュール識別子を表す」からインポートモジュール名を使用する「パスを表し」
デフォルトを使用するか、ES6メンバーが外部に露出輸出エクスポートモジュールで、輸出のデフォルトは簡単に名前を取ることができます導入時にさらされているが、デフォルトのエクスポートは一度だけのモジュールに輸出し、輸出のデフォルトに使用することができ、外部に露出します
外部に露出メンバーのみ「test.js」からフォーム{}インポート{タイトル}の使用を受け入れることができるいくつかのメンバー場合、このフォームは、輸出需要と呼ばれるメンバーのエクスポート複数の外側に露出していてもよい、つつエクスポートを使用私たちは、撮影したとして使う受信需要{} {Tとしてタイトルを}使用する時間に合わせて名前でエクスポートする必要があり、必要でない時に、澤は、もはやメンバーをエクスポートし、エクスポートを使用して、{}で定義されていないことができ、インポート受信するための名前を変更したい場合は、エイリアスのエクスポートエクスポートされたメンバーは、取るために別名として使用することができます
// VAR名=ノードを使用する必要があります（「モジュール識別子」）
////module.exportsと輸出
VUE-ルータ
エルは、指定されたコンテナをレンダリングします、空にされている内容のすべてをカバーし、そのルートtouterビュールータリンクを行い、直接制御コンテナエルを書きます
「アプリは」要素を指定：このコンポーネントは、App VMは、コンポーネントがレンダリングされる場合にのみELを入れ、機能をレンダリング、レンダリング機能を失礼なレンダリングとみなしていました
アカウントとgoodsListアセンブリ、ルートによって監視されている//するので、これらの2つのコンポーネントは、唯一のルート<ルータビュー> </ルータビュー>に属しているように見える行きます
.vue <スタイルはスコープ> </スタイル>
あなたはSCSSやスタイル要素にlang属性を設定するためのより少ない必要性を有効にする場合は、通常のスタイルは唯一、プレーンなスタイルをサポートしています
langは= "SCSS"
WebPACKのリリース戦略
webpack.config.js
webpack.pub.config.js
"パブ"： "のWebPACK --config webpack.pub.config.js"
画像の中にパッケージ画像
糸クリーンWebPACKの-プラグインを追加--dev各リリースの空のフォルダDIST
インポートすべてのフォルダを削除するプラグイン
CONST cleanWebpackPluginは=（ 'クリーンWebPACKの-プラグイン'）が必要です
すべてが別のjsに引き込ま、唯一独自のコード、サードパーティ製のパッケージコードを保存bundle.js、アイデアを公開
constのWebPACKは=（ 'WebPACKの'）が必要です
名前：「vendors1」、//名前は開発の入り口から引き出されます
ファイル名： 'vendors.js'
}）
圧縮されたコード
圧縮：{
警告：偽
}
}）、
//、環境の上限値を圧縮符号ジンクス
"process.env.NODE_ENV"： ' "生産"'
}）、
htmlコード圧縮
縮小化：{
collapseWhitespace：真、
removeComments：真、
removeAttributeQuotes：真//プロパティに二重引用符を削除
}
CSS抽出プラグ
糸はエキス・テキストのWebPACK - プラグインを追加--dev
スタイルの圧縮
私は--save-DEV-CSS-資産-WebPACKの-プラグインを最適化cnpm
VaRのOptimizeCssAssetsPlugin =必要とする（ '最適化-CSS-資産-のWebPACK-プラグイン'）。
新しいOptimizeCssAssetsPlugin（）// CSSファイル圧縮プラグイン
ます。https：//juejin.im/post/5d02464b6fb9a07eed34fa6aで再現