本文主要介绍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 | 不开启任何优化选项 |