Webpack 静态资源加载配置与使用指南

前言

Webpack 静态资源处理机制

在处理非静态文件（如 JS）时，Webpack 打包会将代码直接整合到模块文件中（例如 main.js）。若修改了这些文件，必须重新执行编译过程。相比之下，对于图片等静态资源（如 jpg、svg），我们通常不希望 Webpack 将其打包进代码包中，而是希望在构建完成后直接输出到 dist 目录下的指定路径。这样做的优势在于，静态资源可以随时修改而无需重新编译项目。

首先，我们来看一段典型的 Webpack 配置文件示例。

{
  test: [/\.jpg/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 10000,
    name: 'static/media/[name].[ext]',
  },
}

该配置表明，在解析 jpg 文件时，只需提供一个 URL 即可。当文件大小小于 10000 字节时，文件会被转换为 Base64 编码。生成的 URL 格式为 static/media/xxx.jpg。需要注意的是，这里的 URL 路径并非项目源码中的相对路径（如 src/assets/image/xxx.jpg），而是构建后的输出路径。编译完成后，dist/static/media 目录下会出现对应的 xxx.jpg 文件。

组件中引入静态资源的方法

那么，如何在 React 组件中正确引入这些静态资源呢？

主要有两种引入方式：

第一种方式是在组件顶部使用 import 语句导入。

import b from "@/assets/image/a.jpg"
//此时 b 的值为 static/media/a.jpg

在组件代码中，可以通过 import 语句引入图片资源。

<img src={b}/>

第二种方式是使用 require 函数导入。

如果不想在组件顶部使用 import，而是在组件内部任意位置使用时，可以通过 require 函数来引入静态资源。

<img src={require("@/assets/image/a.jpg")}>
//此时require("@/assets/image/a.jpg")的值就是static/media/a.jpg

其他静态资源（如 Markdown）的配置

同理，如果希望将 Markdown 等其他类型的文件也作为静态资源处理，需要进行相应的配置。

第一步是配置 Webpack 规则。

{
  test: [/\.md/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 10, //可以设置小点
    name: 'static/media/[name].[ext]',
  },
}

第二步是在组件中通过 axios 请求获取文件内容。

//md文件和jpg不同，我们需要的最终是md文件的内容，不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
  //res.data 就是内容
})

部署上线后，如果后续需要修改 map.md 文件，直接修改 static/media 目录下的 map.md 文件即可生效，无需再次编译项目。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。