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/文件夹），并将其重命名为独特的东西，通常是文件内容的一些散列，从而产生89de0f2.png。 （我为这个例子制作了这个名字，但通常看起来像这样）。

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

如果您特别需要，Wepback将仅将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。