如何让Webpack打包通过URL形式引入的assets/image目录下的图片资源

问题原因 #

Webpack 基于静态编译逻辑工作，你用 ${url} 动态拼接的导入路径在编译阶段无法被解析为具体的文件路径，因此不会触发 file-loader 处理，自然不会被打包到输出目录。

可行实现方案 #

方案1：使用 require.context 预加载目录（推荐，复用现有配置） #

该方案会自动扫描 assets/img 下所有匹配格式的图片，完全复用你现有 file-loader 的命名、输出路径、hash 规则，和静态导入效果完全一致：

1. 先封装一个通用的图片获取工具函数：

// 第二个参数false表示不扫描子目录，需要的话可以改成true
const imgContext = require.context('assets/img', false, /\.(png|svg|jpg|jpeg)$/)
export const getAssetImg = (imgFileName) => imgContext(`./${imgFileName}`)

2. 组件中使用：

// 要引入 assets/img/aa.png 直接传文件名即可
const imgUrl = getAssetImg('aa.png')
<img src={imgUrl} alt="" />

方案2：使用 CopyWebpackPlugin 直接拷贝目录 #

如果不想修改现有业务代码，可以直接用插件把整个图片目录拷贝到输出路径，和你手动导入的打包效果一致：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 加到 Webpack 配置的 plugins 数组中：

const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "assets/img",
          // 和你现有file-loader的命名规则保持一致
          to: "static/media/[name].[hash:8].[ext]",
        }
      ]
    })
  ]
}

自定义图片 publicPath 配置 #

file-loader 本身支持单独配置 publicPath，不用和全局 output 配置绑定，直接修改你现有的 loader 配置即可：

{
  loader: 'file-loader',
  options: {
    name: '[name].[hash:8].[ext]',
    outputPath: 'static/media',
    // 单独配置图片的公共访问路径，和全局js/css的publicPath互不影响
    publicPath: 'http://你的自定义域名/static/media'
  }
}

注意事项 #

如果不需要打包所有 assets/img 下的图片、想要按需打包减少体积，可以提前维护一个图片导入映射表：

// imgMap.js
import aaPng from 'assets/img/aa.png'
import bbPng from 'assets/img/bb.png'
export const imgMap = {
  'aa.png': aaPng,
  'bb.png': bbPng
}

组件中通过键名取值即可，只有映射表中引入的图片才会被打包：

const imgUrl = imgMap[yourDynamicImgKey]

内容的提问来源于stack exchange，提问作者Theo Itzaris