webpack 加载器通过哪些文件工作？

Question

当您在加载器对象中的 test 键之后设置正则表达式时，是否会查看项目中的 all 文件并使用您指定的加载器加载它们，即使这些文件您的入口点中的文件不需要吗？然后它会被放入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 时，您的源代码将准确引用 89de0f2.png，因此保证该版本的图像存在。这就是 Webpack 为您提供生产保证资产加载的方式。

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

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

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