require. context

adopt require.context() Function to create your own context. It takes three parameters ：

const requireComponent = require.context(
  //  The relative path of its component Directory , File path 
  './components',
  //  Whether to query its subdirectories 
  false,
  //  Regular expressions that match the file name of the underlying component , Match some files 
  /Base[A-Z]\w+\.(vue|js)$/
)

The export methods are 3 Attributes ： resolve, keys, id
resolve It's a function , It returns the module after the request is parsed id.
keys It's also a function , It returns an array , It consists of all requests that may be processed by the context module .
id Is the module contained in the context module id. It may be used by you module.hot.accept When it comes to

Through it, we can export some resources in batches, such as pictures , Components , Object etc. . such as Vue Cases of officially provided registered components ：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  //  The relative path of its component Directory 
  './components',
  //  Whether to query its subdirectories 
  false,
  //  Regular expressions that match the file name of the underlying component 
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
    
  //  Get component configuration 
  const componentConfig = requireComponent(fileName)

  //  Get the  PascalCase  name 
  const componentName = upperFirst(
    camelCase(
      //  Get the file name independent of the directory depth 
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  //  Global registration component 
  Vue.component(
    componentName,
    //  If this component option is through  `export default`  Derived ,
    //  Then priority will be given to  `.default`,
    //  Otherwise, go back to the root of the module .
    componentConfig.default || componentConfig
  )
})

notes ： The understanding here is not deep enough , It's just that when you see someone else write this in the project, record it first , Wait until you come back later .