webpack--フロントエンドの自動化ツール

まず、ダウンロードしてインストール

// グローバルインストールのWebPACK（推奨）
- NPM I WebPACKのG 
iはWebPACKのNPM -cli -g

 // ローカルインストール（推奨）
NPM IのWebPACK -D 
NPM IのWebPACK-CLI - D 

NPXのWebPACK -vビューWebPACKのバージョン

注：またcnpmインストールを使用することができます。

第二に、コンフィギュレーション・ファイルwebpack.config.js

// WebPACKの設定ファイル、ファイル名を変更することはできません！！！
// ケースではwebpack.con.js NPX wenpackの背後にある--configが名前変更されている変更したい 
のconst =パスを（「パス」）が必要です   // このモジュールのIncorporatedの目的は、構成ファイルのエントリとファイルの書き出しということですルートパス; 
module.exportsは= {
     // 「開発」や「生産」の開発環境の設定、最初の1は、開発環境、本番環境の生産です！！
    MODE： "開発" 、

devtool： '安い-EVAL-ソースマップ'、//マップエラー

    // 設定し、デフォルトのファイルのエクスポート/インポート書類
    // まず入学書類を見つける; 
   エントリ： {    // その後、エントリエントリファイル、ファイルエントリ、直接書き込みは、メインターゲットを書き込みません。 
        メイン：path.join（__ dirnameは、「/インデックス。 .js' ）
    }、
    // エクスポートファイル; 
    出力： { 
        ファイル名： 'bundle.js'、   // ファイルのエクスポートの名前、自由; 
        パス：path.join（__ dirnameは、 '/ DIST'。 ）
    }、
    // Module1を-モジュールパース、唯一のJSとして知られているのWebPACK 
    モジュール： {
         ルール： [{
             // 一致する正規表現 
            のテストを：/ \ CSS $ /。 、
            使用：[
                 "スタイル・ローダー"、   // 解析します。
                「CSSローダ」     // 依存ファイルを解析し、複数のファイルがあってもよいように、CSS 
            ] 
        }、
        { 
            テスト： /\.styl$/、     // 設定ファイルSTYL; CNPMローダIスタイラススタイラス-D-の
            使用：[
                「スタイル・ローダー」、
                「CSS-ローダー」、
                「スタイラスローダ」、   // 通常のCSSに解析; 
                // 注法の順序こと、ボトムアップから、しない無差別; 
            ] 
        } 
        // 画像が解析され、
        { 
            テスト： /\.(jpg|png|svg|gif|jpeg)$/ 、
            使用：[ 
                { 
                    ローダー： "URL-ローダー"   、 // 解析し、画像ファイルを解析; 
                    // CNPM I-ローダーファイルURLローダー-D- 
                    // URLローダーローダー-Dベースのファイル 
                    オプション：{     // イメージCIの 
                        上限：10240 // コントロールに使用ファイルの現在のサイズ、ファイルサイズが現在のファイルセットのサイズを超えた場合、ファイルはDISTに新しいファイルが生成され、現在の設定小さなよりも低い場合、それはファイルにパッケージされ、bate64にビットフォーム;                     } 
                } 
            ] 
        } 
    ] 
    } 
} 注：CSSローダスタイルローダインストールされます

三、ES6はES5（バベル中国人文書）セット---- WebPACKのを回します

パス=一定（ 'パス'を必要とする）;
 //導入HTMLウィジェット、
CONST = HtmlWebPackplugin（ 'HTML-のWebPACK-プラグイン'）が必要
//ダウンロードインストール--save NPM-DEV-HTML-WebPACKのプラグイン
CONST} = {CleanWebpackPlugin （「クリーンWebPACKの-プラグイン」）が必要です
//ダウンロード：cnpm私はクリーンWebPACKの-プラグイン -Dは、 設定が変更され、WebPACKのバージョンとして変更されます。
= module.exportsは{ 
    MODE： '開発' 、
    デベロッパーツール： 'EVAL-安い-ソース-地図'、   // マップのエラー
    エントリ：{ 
        メイン：path.join（__ dirnameは、 'index.js' ）、
    }、
    出力：{ 
        ファイル名： 'es6.js' 、
        パス：path.join（__ dirnameは、'./dist' ）
    }、
    // モジュールパース; 
    Module1の：{ 
        ルール：[ 
            { 
                テスト： /\.css$/ 、
                使用：[
                     "スタイルローダ" 、
                     "CSS-ローダ" 
                ] 
            } 
　　// ES6スイッチES5
    //インストール：NPMインストール--save-devのbabel- ローダー@バベル/コア

// NPMインストール@バベル/プリセット-ENV --save-devの

// --save @バベル/ポリフィル完全ES5に変換インストールNPM;最終エントリファイルには、4つの配置を参照、ファイルのルートディレクトリに個別のファイルを構築する.babelrc必要が：（例えばindex.js）を必要とする必要性を導入します（「@バベル/ポリフィル」）; //彼らはどこ導入をオンにする必要がある場所！！

            { 
                試験： /\.js$/は、
                除外する： / node_modules / 、
                ローダ： "バベルローダ" 
            } 
        ] 
    } 
    // プラグを、アレイです。
    プラグイン：[
         新しい新HtmlWebPackplugin（{ 
            テンプレート：「./index.htmlは」   // テンプレートとしてHTMLファイルによると、このファイルであることを書く
        }）、
         新新CleanWebpackPlugin（）
         // 注プラグインオーダー！！！変更することはできません。
    ] 
}

第四に、設定ファイル.babelrc

{
     "プリセット"：[[ "バベル/ ENV-PRESET @" 、{
         "useBuiltIns"： "使用"    // 有効に用いる; 
    }]] 
  }は、
その可能なファイルに直接コピーされます！

webpack--フロントエンドの自動化ツール

おすすめ