解决一个小坑：error on line 1 at column 1: Document is empty

今天想整个 svg 当背景图，实属把我整懵了。

background-image: url('./icons/add-circle.svg');

这么简单的一句话硬是跑不通，编译倒是没报错，图就是不出来。一开始以为是尺寸问题，然后以为是 svg 不能当背景，然后是以为 less-loader 有问题。

到最后直接打开打包出来的 svg 链接才发现，这 svg 好像根本没正常打包。报了个 error on line 1 at column 1: Document is empty。

原本的 svg 加载方式：

{
  test: /\.(ttf|woff|woff2|eot|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: false,
      },
    },
  ],
}

改成这样就能正确处理：

{ test: /\.svg/, type: 'asset/inline' },

当然这个是 webpack5 的方案，之前还有 svg-inline-loader 之类的历史遗留产物。

服了，webpack 加载 svg 都把我整懵了，硬是整了半小时。