之前面试,面试官问到一个问题,就是Webpack有loader了,为什么要还有弄一个plugins?插件不能也放在loader里面实现吗?
回来查了下,现在总结一下
loader
loader 用于对模块的源代码进行转换。loader 可以使你在
import
或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中import
CSS文件!【即把css转译成js能编译的内容】
- Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件打包的话,就会用到Loader,Loader的作用是让webpack拥有加载和解析非js文件的能力。
插件(plugins)
- Plugin可以拓展Webpack的功能,让webpack具有更多的灵活性,在webpack运行的生命周期中会广播出许多监听事件,这些监听事件在合适的时机通过Webapck提供的API改变输出结果。
插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!
插件目的在于解决 loader 无法实现的其他事。
剖析
webpack 插件是一个具有 apply
属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。
总结区别
1 .文档定义loader为在模块加载时的预处理文件【加载和解析非js文件】,故loader运行在打包文件之前。
2 . plugins的定义为处理loader无法处理的事物,例如loader只能在打包之前运行,但是plugins在整个编译周期都起作用。