windowsの下にwebpackをインストールします.

1.nodejsの公式サイトに行ってnodejsをダウンロードします.  を選択して、
2.nodejsをインストールするとnpmも自動的にインストールされます.
           インストールしたらコマンドが使えます.    node-v    和  npm-vは正しくインストールされているかを確認します.
3.グローバルインストールwebpack  
           コマンドライン:  npm install webpack-g //後のこの-gは全体のインストールを表します.    windowsの環境変数のように、どのディレクトリでも使えます.
4.webpack 4  インストールが必要です       webpack-cli 
           グローバルインストール     webpack-cli              (必ずグローバルに設置してください.-Dでインストールするとエラーが発生します.)
           コマンドライン:  npm install webpack-cli-g
            説明:
npm install module_name-S    すなわち    npm install module_name--save    dependenciesに書き込みます
npm install module_name-D    すなわち    npm install module_name--save-dev書き込みdevDependencies
npm install module_name-gグローバルインストール(コマンドライン使用)
npm install module_nameローカルインストール(インストールパッケージを./nodemumodulesの下に置く)
dependenciesとdevDependenciesは何の違いがありますか?
devDependenciesの中のプラグインは環境を開発するだけに使って、生産環境に用いません.
dependenciesは生産環境に公開する必要があります.
webpackの核心概念   entry(エントランス包装)   out put(出力ファイル)   loaders(他のプロセッサをロードする)  plugins(プラグイン)
          1)イベントのフォーマット   (entryは3つのフォーマットがあり、単一の入口と複数の入り口に使用できます.)
                 フォーマットa:   

module.exports = {
    entry:"app.js"     //                app.js
}

               フォーマットb:

module.exports = {
    entry:["app.js","index.js"]    //                     app.js  index.js
}

             フォーマットc:

module.exports = {
    entry:{
        app : "app.js",
        index : "index.js"
    }
}
//                  app.js   index.js  
//                          

一般のおすすめ  フォーマットC;
2.  out put   パッケージファイルの出力を表示します.
フォーマットは以下の通りです

module.exports = {
    entry:"app.js",
    output:{
        filename:"bundle.js"
    }
}
//    app.js  ，        bundle.js

           ，               

module.exports = {
    entry:{
        app:"app.js",
        index:"index.js"
    },
    output:{
        filename:"[name].bundle.[hash:5].js"
    }
}

//    [name]   [hash:5]      ，     entry             [name]  

3.loader  webpackはデフォルトではjsコードを包装できます.cssなど他のファイルも包装しなければなりません.loadersを使います.
loaderを追加するフォーマットは以下の通りです.

module.exports = {
    entry:{
        app:"app.js"
    },
    output:{
        filename:"bundle.js"
    },
    
    module:{
        rules:[
            {
                test:'/\.css$/',        //         .css   
                use : 'css-loader'      //   css-loader      
            }
        ]
    }

}

よく使うloaderには、babeld-loaderがあります.  (ES 6の文法はES 5の文法に変換できます.)
                               style-loader css-loader(css関連)
                               file-loader url-loader(ファイルとパスに関する)
4.plugis  (パッケージ全体に参加できるプラグイン)
変数を設定することができます.
httml-webpack-plugin  プラグインの基本的な役割はファイルを生成することです.