webpack基础用法 (笔记)

177 阅读1分钟

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的集合