WebPACKのトライモードを学びます

開発環境（開発）および生産（生産）のビルドターゲットは大きく異なります。では開発環境、我々はリアルタイムリロード（再読み込みライブ）を交換（ホットモジュールの交換）またはソースマップモジュールの熱容量とローカルホストサーバと、強く持っている必要があります。で生産環境、我々はロード時間を改善するために、より小さなバンドル、より軽量なソースマップだけでなく、より多くのリソースの最適化に注意を向けることを目指しています。分離のロジックに従うことにより、我々は通常、それぞれの環境のために、互いに独立してWebPACKの構成の書き込みをお勧めします。

我々はより多くが環境生産と開発環境は -しかし、私たちは非繰り返しの原則に従うことに注意してくださいは、（DRY DOは自分自身を繰り返していない）してください、少し区別をした、「ユニバーサル」の設定を保持します。configureマージこれらを一緒に、我々はと呼ばれるプログラムを使用します webpack-merge ツールを。「一般的な」構成により、我々は、環境固有のコード（環境固有）の設定を繰り返す必要はありません。

任意のプロジェクトでは、2つの相の開発と生産を持っていないWebPACKのも（開発）を開発する必要があり、生産（生産）モードの2つのモードの本質では、プロジェクトをパッケージ化することであるが、異なるモードの下では異なります異なるパッケージング効果をもたらす、異なるプラグインおよびオプションを可能にします。

セットアッププロジェクトのモデルはシンプルです

パス=一定（「パス」）を必要とする; // これのNode.jsが搬送モジュールでパスが有効異なる剛性道路の不一致が生じ、機械防止することができる

module.exportsはし = { 
    エントリ：{ 
        インデックス：__dirname +「/ SRC /インデックス.js' 
    }、
    出力：{ // 入力設定ファイルの 
        パス：__dirname + 『/ビルド』、// 指定されたアドレス出力ファイル 
        名：「./js/[name].js」、// エントリファイルキーにファイル名のエントリとして含まれる値である{アプリ：「./ SRC / index.js 」} 、対応する出力ファイルapp.jsときエントリパラメータオブジェクト、これが唯一使用できる
    }、
    MODE：「開発」、// WebPACKのモジュール構成は、構成ファイル内のモードを追加する項目を追加し、実際には非常に簡単です、あなたはモードを指定することができます
    。// 2つのモードがあり、開発モデルの開発と生産パターンの生産者 
}

しかし、それは我々が我々のニーズを満たすために、より柔軟にできるように、2つの構成ファイルを使用することをお勧めします、例えば、我々は2つのプロファイルを設定します

webpack.dev.js

webpack.pro.js

その後、我々は唯一のパッケージでアクティブなプロファイルを指定する必要があり、.json中に

package.json

{
   "名"： "プロジェクト3" 、
   "バージョン"： "1.0.0" 、
   "説明"： "" 、
   "メイン"： "index.js" 、
   "スクリプト" ：{
     "テスト"： "エコー\"エラー：何のテストは\」&& 1"番出口指定されていない、
     "b_devを"： "のWebPACK --config webpack.dev.js"、// 打包时使用开发模式配置 
    "b_pro"： "のWebPACK --config webpack.config.js" // 打包时使用生产模式配置
  }、
   "キーワード" ：[]、
   "著者"： "" 、
   "ライセンス"： "ISC"、
   "依存性" {
     "のWebPACK"： "^ 4.41.2" 、
     "WebPACKの-CLI"： "^ 3.3.10" 
  } 
}

次に、コマンドラインまたは別々に実施、あなたがパッケージ化されたファイルを観察することができb_pro NPM実行b_devh NPMの実行を実行し、

私たちは、自動的に、そのようなあなたがあなた自身のプラグインUglifyJsPluginを設定するために必要なすべての前に、後でwebpack4 +最適化である自動的に圧縮b_proパックされたファイル、などいくつかの違いが、設定されますのためにどちらのモードでも、やるのWebPACK。

当社独自の設定、開発と生産のパターンに加えて、様々な他のプラグインが有効になっているデフォルト設定されます（もちろん、カスタム設定の優先順位はWebPACKのデフォルト設定よりも大きい場合）

場合は、次の表

あなたはこの効果以下のプラグインを使用することができますBaiduの、次の章、WebPACKのローダといくつかの一般的に使用されるローダー

WebPACKのトライモードを学びます

おすすめ