Webpack构建HTML时引用npm依赖模板包图片报错求助

我之前也碰到过一模一样的情况——当你在扩展项目里用相对路径引用node_modules里模板包的资源时，Webpack会默认从当前文件所在目录出发查找，自然找不到依赖包里的文件。这里有几个实用的解决办法：

方法1：直接使用指向依赖包的相对路径 #

如果你的扩展项目文件和依赖包的位置关系固定，可以直接把资源路径改成指向node_modules里的模板包。比如你的模板包叫test，路径可以写成：

<div> <img src='../test/template/assets/img/icons/back-arrow.svg' /> </div>

不过这种方式的缺点是，一旦你的文件目录结构变动，相对路径就得跟着调整，灵活性不高。

方法2：配置Webpack的resolve.alias别名 #

这是我最推荐的方式，在Webpack配置文件里给模板包的资源目录设置一个别名，以后引用资源就不用写长长的路径了：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置项
  resolve: {
    alias: {
      '@template-assets': path.resolve(__dirname, 'node_modules/test/template/assets')
    }
  }
}

之后在代码里就能这样简洁引用：

<div> <img src='@template-assets/img/icons/back-arrow.svg' /> </div>

不管你的文件目录怎么变，只要别名配置正确，就能正常找到资源。

方法3：在模板npm包中统一导出资源路径 #

如果这个模板包是你自己维护的，可以在模板包里加一个专门导出资源路径的文件，比如：

// 模板包中的src/assets-paths.js
module.exports = {
  backArrow: require('./template/assets/img/icons/back-arrow.svg')
}

然后在扩展项目里直接导入这个路径：

import { backArrow } from 'test/assets-paths'

如果是在HTML模板里使用，可以结合框架的动态绑定语法，比如Vue：

<div> <img :src="backArrow" /> </div>

这种方式适合需要频繁引用模板包资源的场景，能统一管理所有资源路径。

最后还要提醒一句：确保你的Webpack配置里正确处理了SVG文件，比如用file-loader或者url-loader，不然就算路径对了也可能报错：

// webpack.config.js中的module.rules
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['file-loader']
      }
    ]
  }
}

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