loader
作用:webpack只能识别js和json两种类型,那么不能解析的文件就需要loader进行处理
plugin
作用:用于bundle文件的优化,资源管理和环境变量的注入,作用于整个构建过程
常用的plugin:
- CommonsChunkPlugin:将chunks相同的模块代码提取成公共js
- CleanWebpackPlugin:清理构建目录
- ExtractTextWebpackPlugin:将css从bundle文件里提取成一个独立的css文件
- CopyWebpackPlugin:将文件或者文件夹拷贝到构建的输出目录
- HtmlWebpackPlugin:创建html文件去承载输出的bundle
- UglifyjsWebpackPlugin:压缩js
- ZipWebpackPlugin:将打包出的资源生成一个zip包
babel
官网概念是:Babel 是一个 JavaScript 编译器,说白一点,他就是一个代码转换器,将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中,主要的两块概念:
plugins: 一个plugins对应一个功能
presets: 一些列babel-plugins的集合