本文主要介紹webpack中的loaders, plugins, mode。
1. loaders
webpack原生只支持js和json類型，但可以通過loaders支持其它文件類型。
常見的loader總結：
| 名稱 | 描述 |
|---|---|
| babel-loader | 轉換ES6, ES7等js新特性語法 |
| css-loader | 支持.css文件的加載和解析 |
| less-loader | 將less文件轉換成css |
| ts-loader | 將ts轉換成js |
| file-loader | 圖片、字體等的打包 |
| raw-loader | 將文件以字符串的形式導入 |
| thread-loader | 多進程打包js和css |
2. plugins
plugins作用於整個構建過程，用於文件的優化，資源管理和環境變量的注入等。
常見的plugins總結：
| 名稱 | 描述 |
|---|---|
|
CommonsChunkPlugin |
將chunks相同的模塊代碼提取成公共js |
| CleanWebpackPlugin | 清理構建目錄 |
| ExtractTextWebpackPlugin | 將css從bundle文件中提取成一個獨立的css文件 |
| CopyWebpackPlugin | 將文件或者文件夾拷貝到輸出目錄 |
| HtmlWebpackPlugin | 創建html文件承載輸出的bundle |
| UglifyjsWebpackPlugin | 壓縮js |
| ZipWebpackPlugin | 將打包出的資源生成一個zip包 |
3. mode
mode用來指定當前的構建環境，可選的有：production, development和none。
設置mode可以使用webpack內置函數，默認值爲production。
mode的內置函數功能：
| 選項 | 描述 |
|---|---|
| development |
process.env.NODE_ENV = development 開啓NamedChunksPlugin 和 NamedModulesPlugin |
| production |
process.env.NODE_ENV = production 開啓FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin ，TerserPlugin。 |
| none | 不開啓任何優化選項 |