在 webpack 中使用加载器如何影响你的构建文件？

Question

当我编写传统的 Web 应用程序（MVC 类型）时，资源是从 public 文件夹（通常）提供的，但我注意到在 React 中没有 public 文件夹（使用 create -react-app)... 相反，我使用了加载程序。

加载的文件是否包含在 Webpack 为 React 构建后生成的捆绑文件中？这是否意味着最好将 CDN 用于静态资产而不是使用图像加载器，因为它会增加构建的大小？

或者在使用 create-react-app 时处理静态资产的一些最佳实践是什么？

如果您有任何意见，请提前致谢！只是想更好地理解...

Answer 1

如果您使用 create-react-app，并且将图像导入 JS 文件，这些图像将使用 url-loader webpack 模块 (link to its github), which either embeds your images directly into the HTML using DataURLs (more on that here) 加载，或者将图像放入如果它们大于 10,000 字节，则放入它们自己的单独文件中。

相关代码在webpack.config.prod.js:

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]',
    },
},

根据上述配置，较大的图像（超过 10,000 字节）将放置在 static/media 文件夹中。

如果您将图像导入到 JS 文件中，就会出现这种情况，如下所示：

import img from './file.png'

如果您不导入图像，则完全由您选择如何组织图像。例如，您可以将图像放在根目录的 /static/images 文件夹中，并像这样引用这些图像：

<img src="/static/images/logo.png" />

就最佳实践而言，您可以通过任何一种方式进行争论。使用 url-loader 的一个主要好处是较小的图像嵌入到您的 HTML 中，这应该有助于提高性能。另一方面，从 CDN 提供图像可能比应用程序的服务器更快地提供大图像。

在 webpack 中使用加载器如何影响你的构建文件？

How does using loaders in webpack affect your build file?

javascript

frontend

reactjs

webpack

create-react-app