webpack是一个模块打包器(webpack module bundler),本身结构精巧,它提供了很多开箱即用的功能。同时,它还基于tapable(将实现与流程解耦)的插件结构,扩展性强,还可以使用loader和plugin来扩展。
-
loader加载器,是一个导出为function的node模块,主要用来处理文件,将匹配到的文件进行一次转换,然后进行链式传递。也可以认为,loader是一个转换器,把a文件转换为b文件。
- 样式:css-loader、less-loader、sass-loader、style-loader等
- 文件:file-loader(复制和放置资源位置,指定文件名的格式比如hash)、raw-loader(将文件以字符串的形式返回)、url-loader(将小于配置limit大小限制的文件转换成内敛Data Url的方式)等
- 编译:vue-loader、ts-loader、coffee-loader、babel-loader等,将特定文件格式转换为js模块,将其他语言转化为js语言,编译下一代js语言
- 校验测试:mocha-loader、jshintt-loader、eslint-loader等
-
plugin插件,扩展webpack的功能。也可以任务,plugin是一个扩展器,它丰富了webpack本身。它针对loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的节点,执行任务。
- 内置UglifyJsPlugin,压缩和混淆代码。
- ParallelUglifyPlugin,多进程并行处理压缩。