巧妙打包组件库图片，提升组件便捷性

有时候没有 svg 图标，需要用 png 等格式图片作为图标，势必也要将图片打包进组件里方才可以让人使用。

常见错误是将图片放入根目录的 pub 文件夹中，然后在组件中通过 import 语句导入图片。

import myIcon from '~/public/my-icon.png'

这样做存在两个问题：

1. 当组件被发布到 NPM 后，~/public 文件夹不会被包含在发布包中，导致图片无法加载。
2. 当组件被使用时，如果图片的路径与组件的路径不同，就会导致图片加载失败。

针对第一个问题，需要将图片放入组件的 src 文件夹中，然后在组件中通过 require 语句导入图片。

const myIcon = require('./src/my-icon.png')

针对第二个问题，可以使用 webpack 的 file-loader 插件来解决。file-loader 插件可以将图片打包成 base64 编码的字符串，并将其嵌入到 JavaScript 代码中。这样，当组件被使用时，无论图片的路径是什么，都可以正常加载。

在 webpack 的配置文件中添加以下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'dist/images',
            },
          },
        ],
      },
    ],
  },
  // ...
}

这样，图片就会被打包成 base64 编码的字符串，并嵌入到 JavaScript 代码中。

除了使用 file-loader 插件，还可以使用 url-loader 插件来解决这个问题。url-loader 插件也可以将图片打包成 base64 编码的字符串，但它还可以根据图片的大小来决定是否将图片打包成 base64 编码的字符串。如果图片较小，url-loader 插件就会将图片打包成 base64 编码的字符串。如果图片较大，url-loader 插件就会将图片打包成文件。

在 webpack 的配置文件中添加以下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[ext]',
              outputPath: 'dist/images',
            },
          },
        ],
      },
    ],
  },
  // ...
}

这样，图片就会根据大小来决定是否被打包成 base64 编码的字符串。

通过以上方法，就可以巧妙地打包组件库图片，提升组件的便捷性。