webpack加载器可以处理哪些文件？

Question

当您在加载程序对象中的test键之后设置正则表达式时，它会查看项目中的所有文件并使用您指定的加载程序加载它们，即使您的入口点文件不需要这些文件？这是否会放在bundle.js文件中？

Answer 1

不，它只包含脚本所需的内容。

Answer 2

<img src={ require('../some/img.png') } />是一种告诉Webpack您的源代码需要运行此图像的方法。

在生产Webpack构建中，这将编译为类似<img src="http://yoursite/whatever/89de0f2.png" />的内容。 require()语句从不执行，它已被有效的Javascript代码替换。这个被替换的代码是bundle.js中的内容。

然后将图像放入您指定的任何输出文件夹（如本地dist/文件夹），并将其重命名为唯一的内容，通常是文件内容的一些哈希，从而导致{ {1}}。 （我为这个例子编写了这个名字，但它通常看起来像那样）。

现在当您上传该文件89de0f2.png时，您的源代码将完全引用89de0f2.png，以确保该图像版本存在。这就是Webpack为您提供生产保证资产负载的方式。

如果您明确要求，Wepback只会将89de0f2.png文件夹中的img.png dist/放入89de0f2.png。任何其他图像都不会放在该文件夹中。

您可能还会询问base64编码图像并将它们直接放入bundle.js文件中。在这种情况下，没有图像放入dist/，但所有其他规则都会回复。 require()调用仍然替换为有效的Javascript。

有一种情况是Webpack需要多个资产。您可以要求模式，如<img src={ require.context( './images', true, /\.png/ ) } />，Webpack会将该目录中的所有png文件构建到dist/文件夹中。有关更多背景信息，请参阅this Stackoverflow question。