vue-cli配置Webpack

Question

想在Webpack中添加如下配置:
(src/icons中的svg文件用svg-sprite-loader载入, 其他文件夹中的svg用url-loader载入)

      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

vue-cli < v3.0.0时, 直接在webpack.base.conf.js里修改就完了,
但是在vue-cli v3.0.0里, 配置方式变了
跟着这个 文档 改了半天还是没改对

现在vue.config.js是这样写的 (运行不对) :

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
    chainWebpack: config => {
    // 添加loader
    config.module
      .rule('svg')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      //.include([resolve('src/icons')])
      .options({ symbolId: 'icon-[name]' })
      .end()
    // 修改loader配置
    config.module
      .rule('svg')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(exclude => {
        exclude = [resolve('src/icons')]
        return exclude
      })
  }
}

Answer 1

还是这个文档.. 里面有讲规则替换方法

暂时实现统一用svg-sprite-loader载入,后面再研究下分区文件夹..

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

Answer 2

这样是可以的。而且写include和exclude要在use和loader之前写

module.exports = {
    chainWebpack: config => {
        config.module
            .rules
            .delete('svg')

        config.module
            .rule('svg')
            .test(/\.(svg)(\?.*)?$/)
            .include
            .add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}