webpack中的 loaders, plugins, mode

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