require.context 在vuex和svg中的应用

目录结构如上图，在vue-admin中看到的require.context写法,可以一次导入多个文件。（比如vuex中，导入svg等）

#从./modules的目录下面找出js文件
const moduleFiles = require.context('./modules', true, /\.js$/)
const modules = {}
# moduleFiles.keys() 返回的是一个数组['./user.js'],最总需要的结果是modules={ user:{}}
moduleFiles.keys().forEach(item => {
  const name = item.replace(/.\/|.js/ig, '')
  #moduleFiles(item).default  是文件中的内容
  modules[name] = moduleFiles(item).default
})

svg精灵图中的应用

1.将精灵图导入

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

2.vue.config.js中配置

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

3.使用

    <svg width="18px" height="18px" class="svg">
      <use :xlink:href="'#icon-'+icon" />
    </svg>