Webpack的plugin和loader

webpack
Thu Aug 16 2018 07:34:19 GMT+0000 (UTC)

什么是loader?

loader 用于对模块的源代码进行转换。
loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。
loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

loader特性

  • loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回 webpack 所预期的 JavaScript。
  • loader 可以是同步的,也可以是异步的。
  • loader 运行在 Node.js 中,并且能够执行任何可能的操作。
  • loader 接收查询参数。用于对 loader 传递配置。
  • loader 也能够使用 options 对象进行配置。
  • 除了使用package.json常见的main属性,还可以将普通的npm模块导出为loader,做法是在package.json里定义一个 loader 字段。
  • 插件(plugin)可以为loader带来更多特性。
  • loader 能够产生额外的任意文件。

什么是plugin?

插件是wepback的支柱功能。webpack自身也是构建于,你在webpack配置中用到的相同的插件系统之上! 插件目的在于解决loader无法实现的其他事。

Plugins are the backbone of webpack. webpack itself is built on the same plugin system that you use in your webpack configuration! They also serve the purpose of doing anything else that a loader cannot do.

loader vs plugin

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
插件接口功能极其强大,可以用来处理各种各样的任务。