如何用webpack打包含图片的JS库，使图片在消费者项目中可正常访问

你的三个猜想的正误判断 #

• 猜想1部分成立：面向webpack生态的可复用组件库，确实不推荐用构建应用的逻辑提前全量打包，把资源和代码捆死，更合理的做法是只做语法转译，资源交给消费者的构建链处理。
• 猜想2不成立：通过Image组件抽象图片资产的做法完全可行，不需要消费者手动导入每张图片。
• 猜想3成立：你当前的webpack配置是面向应用打包的逻辑，不适合用于发布到npm的可复用库构建。

可行的解决方案 #

方案1：图片base64内联（改造成本最低）

直接把图片转成base64编码内嵌到组件JS代码中，不会产生独立的图片文件，消费者无需任何额外配置即可直接使用。
修改webpack图片处理配置即可：

// webpack 5 配置
{
  test: /\.(png|jpg|gif|svg)$/,
  type: 'asset/inline'
}

// 旧版webpack 用url-loader
{
  test: /\.(png|jpg|gif|svg)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 1024 * 1024, // 小于1M的图片全部转base64，可根据实际情况调整阈值
      fallback: 'file-loader'
    }
  }]
}

该方案适合图片体积不大、数量不多的场景，缺点是会增大组件库的JS包体积。

方案2：调整库发布形态（组件库通用方案）

不要用webpack做全量打包，仅用Babel做语法转译，保留源码中的图片import语句，发布时将转译后的JS代码和原始图片资源一起上传到npm。
消费者构建项目时，自身的webpack配置会自动处理你组件内的图片导入逻辑，将图片复制到对应输出目录并生成正确的引用路径，无需额外适配。
你只需要确保package.json入口配置正确，且发布包包含所有图片资源即可。

方案3：强制消费者复制资源（不推荐）

如果你必须保持当前的全量打包逻辑，可以要求消费者在自己的项目中安装copy-webpack-plugin，在构建时主动将node_modules/你的库名/dist/images目录下的所有图片复制到自身项目输出目录的images子目录下，即可匹配你硬编码的路径规则。
该方案对消费者不友好，仅适合内部使用的私有组件库场景。

内容的提问来源于stack exchange，提问作者Christopher Francisco