Webpack 5 如何对npm依赖模块内的静态资源进行打包

问题1解答：将data URL转换为单独文件的loader #

你可以使用extract-loader配合file-loader实现该需求，配置示例如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 仅匹配你的npm包产物，避免影响其他代码
        include: /node_modules\/myNpmModule/,
        use: [
          'extract-loader',
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/',
              name: '[name].[contenthash][ext]'
            }
          }
        ]
      }
    ]
  }
}

不过该方案属于反向处理，构建性能和兼容性都一般，不推荐作为首选方案。

问题2解答：更优的解决方案 #

推荐优先从npm包侧优化，实现使用者零配置接入，不需要修改上层项目的Webpack配置：

包侧优化方案 #

1. 调整你的npm包源码中图片的引用方式：不要直接写相对路径字符串，改为ES模块导入的方式引用图片：

// 你的npm包组件源码
import imageSrc from './assets/image.png'
// 渲染时直接使用导入的变量
function Component() {
  return <img src={imageSrc} />
}

2. 调整你的npm包的Webpack打包配置，使用asset/resource处理图片资源，同时开启自动publicPath：

// 你的npm包的webpack.config.js
module.exports = {
  output: {
    // 关键配置：自动匹配资源加载路径，不需要硬写固定路径
    publicPath: 'auto',
    assetModuleFilename: 'assets/[name].[contenthash][ext]'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
}

该方案下，上层应用引入你的包时，Webpack会自动识别图片依赖，将资源打入产物并自动适配正确的访问路径，不需要使用者做任何额外配置。

若不想修改包代码的临时方案 #

如果暂时无法调整npm包的代码，可以让上层项目修改Webpack配置，将你的包纳入静态资源处理范围即可：

// 上层项目的webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        // 新增你的npm包路径，默认很多项目的asset规则会排除node_modules，所以要单独加
        include: /node_modules\/myNpmModule\/dist\/assets/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].[contenthash][ext]'
        }
      }
    ]
  }
}

你之前使用new URL('./image.png', import.meta.url)无效的原因也在于上层项目的资源处理规则没有覆盖到你的npm包，加上上述include配置后即可正常生效。

内容的提问来源于stack exchange，提问作者price-visible-announcement