2021.08.09 require.context 动态引入文件【webpack】

基本用法

require.context(文件夹路径，是否搜索子文件夹下面的内容， 正则匹配 )，执行后返回一个函数，并且这个函数有三个属性。

resolve 是一个函数，它返回请求被解析后得到的模块 id。

keys 是一个函数，它返回一个数组，返回每个模块的相对路径。

id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

let routeNames = []

var files = require.context('./', false, /\.js$/)

files.keys().forEach(name => {  

if (name !== './index.js') {   

	routeNames = routeNames.concat(files(name).default || files(name))

}})

举个栗子

比如我们要把文件夹中所有的svg图标罗列出来，呈现供选择，咱们就写一个js文件

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

const re = /\.\/(.*)\.svg/

const icons = requireAll(req).map(i => {
  return i.match(re)[1]  //注： match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
})

export default icons

然后正常使用就行了

<template>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list">
      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  data() {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>