Vue项目运行时提示svg-sprite-loader ExtractPluginMissingException？

Question

我已经执行了：

> vue add svg-sprite
> npm install svgo svgo-loader --save-dev
> npm install svg-sprite-loader

运行时终端打印warning：

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin    
at Object.loader (D:\master\vue-element-study\node_modules\svg-sprite-loader\lib\loader.js:47:13)

 @ ./src/assets/icons sync ^\.\/.*\.svg$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SvgIcon/SvgIcon.vue?vue&type=script&lang=js&
 @ ./src/components/SvgIcon/SvgIcon.vue?vue&type=script&lang=js&
 @ ./src/components/SvgIcon/SvgIcon.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.10:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js   

浏览器控制台报错：

vue.config.js 配置如下：

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  baseUrl: "/",
  // 输出目录
  outputDir: 'dist',
  lintOnSave: true,
  // 是否为生产环境构建生成 source map？
  productionSourceMap: false,
  // alias 配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      config.module.rules.delete("svg");
      config.module
        .rule('svg-smart')
        .test(/\.svg$/)
        .include
        .add(resolve('src/assets/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: '[name]'
        })
  }
}

求教如何解决？

Answer 1

可能是你webpack配置中没有配置 svg-sprite-loader