鍍金池/ 問答/HTML/ vue-cli配置Webpack

vue-cli配置Webpack

想在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里, 配置方式變了
跟著這個 文檔 改了半天還是沒改對

現(xiàn)在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
      })
  }
}
回答
編輯回答
墨染殤

還是這個文檔.. 里面有講規(guī)則替換方法

暫時實現(xiàn)統(tǒng)一用svg-sprite-loader載入,后面再研究下分區(qū)文件夾..

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]'
      })
  }
}
2017年2月22日 07:36
編輯回答
維她命

這樣是可以的。而且寫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]'
            })
    }
}
2018年4月19日 18:21