简体繁体 English

webpack loader如何工作？

[英]How does webpack loader work?

原文 2017-11-11 20:28:38 2 1 javascript/ webpack

Is it correct to think that loaders actually transform other types of code into javascript code? 认为加载程序实际上会将其他类型的代码转换为javascript代码是否正确？ So a CSS-loader actually transforms CSS code into Javascript so that the JS file that imports CSS actually gets CSS transformed and then injected into that JS file when you webpack builds out your bundle? 因此，CSS加载程序实际上将CSS代码转换为Javascript，以便导入CSS的JS文件实际上已转换为CSS，然后在您的webpack生成捆绑包时注入到该JS文件中？

1 个解决方案

This isn't true for all loaders. 并非所有的装载机都这样。 The idea behind Webpack loaders is to provide multiple ways to handle some resource or asset - whether that's a javascript module, a CSS stylesheet, or an image. Webpack加载程序背后的想法是提供多种方式来处理某些资源或资产-无论是javascript模块，CSS样式表还是图像。 The loader is responsible for parsing/processing the resource, which might do any of the following: 加载程序负责解析/处理资源，这可以执行以下任何操作：

Transpile it into another language (eg babel-loader) 将其转换为另一种语言（例如babel-loader）
Copy the resource to a specified location and provide the new location as the imported value (eg file-loader) 将资源复制到指定位置，并提供新位置作为导入值（例如，文件加载器）
Ignore the resource entirely (eg ignore-loader) 完全忽略资源（例如ignore-loader）

One thing that makes webpack so powerful is that these loaders can find more dependent resources inside the resource they're processing, and hand off to other loaders. 使webpack如此强大的一件事是，这些加载器可以在它们正在处理的资源中找到更多依赖的资源，然后移交给其他加载器。 So it's plausible to import an HTML file within your javascript, and that HTML file could reference another javascript file, which could then be loaded too. 因此，在您的javascript中导入HTML文件是合理的，并且该HTML文件可以引用另一个javascript文件，然后也可以将其加载。