Webpack 4入門ノート-パッケージモード選択

modeとは
Webpack 4はmodeの構成項目を追加し、デフォルトの作業を行い、webpacke構成の複雑な弊害をある程度解決します.
構文

mode:'development|production'

設定しないデフォルトはproductionです.これは2つのモードで動作します.

//parent chunk     chunk    
optimization.removeAvailableModules:true
//    chunks
optimization.removeEmptyChunks:true
//     chunk
optimization.mergeDuplicateChunks:true

development
開発モデルとは、開発時にこのモデルを用いて、主に以下の作業を行った(了解すればよい)ことである.
1 . デフォルトでは、次のプラグインが構成されています.

//    
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
]

2 . その他の構成(ネット上の)

dev-toolをオンにすると、ブラウザのデバッグが容易になります(devtool:'inline-source-map')

を再構成する必要はありません.

outputを開く.pathinfoは、生成されたbundleにモジュールパス情報

を表示する

NamedModulesPlugin(ホットロードは不要)

をオンにします.

NoEmitOnErrorsPlugin

をオン

は、詳細なエラーメッセージ

を提供する.

キャッシュメカニズムを利用して、

の迅速な構築を実現する.
次はもっと全部みたい

//  
devtool:eval
//    ,            。
cache:true
//         ,         。
module.unsafeCache:true
//  bundle    「       」     
output.pathinfo:true
//                ,            。
optimization.providedExports:true
//  chunk      ,        chunk
optimization.splitChunks:true
//  webpack           chunk
optimization.runtimeChunk:true
//           
optimization.noEmitOnErrors:true
//           ids
optimization.namedModules:true
//  chunk        ids
optimization.namedChunks:true

注:何をしたのかわからないが、とにかく開発しやすいはず
production
製品モデル、すなわちプロジェクトのオンライン時にこのモデルを使用してパッケージ化し、主に以下の仕事をした(理解すればよい)
1 . デフォルトでは、次のプラグインが構成されています(公式に与えられています)

plugins: [
    //     
    new UglifyJsPlugin(/* ... */), //        
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]

2 . その他の構成(ネット上の)

//      
performance:{hints:"error"....}
//  chunk  chunk           ,   chunks            
optimization.flagIncludedChunks:true
//      ids    
optimization.occurrenceOrder:true
//             
optimization.usedExports:true
//  package.json or rules sideEffects   
optimization.sideEffects:true
//                      。- -
optimization.concatenateModules:true
//  uglify-js    
optimization.minimize:true

コマンドラインの使用
パッケージ化時にコマンドラインを使用してモードを変更することもできます

webpack --mode=production