Webpack中loader和plugin有什么区别?
插件文档中只是说:
使用插件通常与webpack中的捆绑相关功能。
我知道babel使用loader进行jsx/es2015转换,但其他常见任务(例如copy-webpack-plugin)似乎使用插件而不是loader。
Webpack中loader和plugin有什么区别?
插件文档中只是说:
使用插件通常与webpack中的捆绑相关功能。
我知道babel使用loader进行jsx/es2015转换,但其他常见任务(例如copy-webpack-plugin)似乎使用插件而不是loader。
当你在代码中使用 require("my-loader!./my-awesome-module")
时,加载器可以对几乎任何文件格式进行预处理转换。与插件相比,它们更为简单,因为它们(a)只向webpack暴露一个单一的函数,(b)不能影响实际的构建过程。
另一方面,插件可以深度集成到webpack中,因为它们可以在webpack的构建系统中注册钩子,并访问(和修改)编译器以及编译过程的工作方式。因此,它们更加强大,但也更难维护。
在本质上,webpack只是一个文件打包工具。考虑一个非常简单的场景(没有代码分割),这可能只意味着以下高层次操作:
当您仔细检查上述步骤时,这与Java编译器(或任何编译器)所做的事情相符。当然,存在差异,但这些不影响理解加载器和插件。
加载器:
由于webpack承诺捆绑任何文件类型,因此需要加载器。
由于webpack在本质上只能够捆绑js文件,因此该承诺意味着webpack核心团队必须纳入构建流程,以允许外部代码以webpack可以消费的方式转换特定的文件类型。
这些外部代码称为加载器,它们通常在上述步骤1和3期间运行。因此,由于这些加载器需要运行的阶段是明显的,它们不需要钩子,也不会影响构建过程(因为构建或打包只发生在步骤4)。
因此,加载器准备编译的场景,并在某种程度上扩展了webpack编译器的灵活性。
插件:
尽管webpack并没有直接承诺可变输出,但人们需要它,而webpack也允许这样做。
由于webpack本质上只是一个捆绑器,但在执行此操作时经过了多个步骤和子步骤,因此可以利用这些步骤来构建其他功能。
例如,生产构建过程(缩小并写入文件系统)是webpack编译器的本机功能,可以将其视为其核心能力(即捆绑)的扩展,并像本机插件一样处理。如果他们没有提供它,其他人就会提供。
从上面的本机插件中可以看出,似乎webpack捆绑或编译可以分解为核心捆绑过程以及许多本机插件过程,我们可以在其中打开、自定义或扩展。这意味着允许外部代码在他们可以选择的特定点(称为钩子)加入捆绑过程。
插件因此影响输出并扩展了webpack编译器的功能。