在 create-react-app 创建的项目中使用 svg-sprite-loader

create-react-app 可以很方便的初始化一个 React 项目，但是当我们需要完成一些特定需求的时候，便要 eject 来做定制化操作。

本文主要讲述在 create-react-app 创建的项目中使用 svg-sprite-loader 的方法，以及其中要注意的问题。

第一步：eject

$ yarn run eject

第二步：添加依赖

$ yarn add -D svg-sprite-loader svgo svgo-loader

第三步：修改配置

要启用 svg-sprite-loader 需要修改两个配置文件：config/webpack.config.dev.js 与 config/webpack.config.prod.js。

在 module.rules.oneOf 中添加如下内容：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'svg-sprite-loader'
    },
    {
      loader: 'svgo-loader'
    }
  ]
}

需要注意到的是，以上内容一定要添加到 oneOf 项下，而不是 rules。因为如果直接添加到 rules 下的话，会受到 oneOf 中 file-loader 的影响。