vue和webpack---require.context()的用法详解

前言

require.contextt()官方文档
如果你有非常多的组件，你也可以利用构建工具的功能，比如 Vite 的 glob 导入或者 webpack 的 require.context 来从一个文件夹加载所有的组件。

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名
例如 require.context(‘./test’, false, /.test.js$/);

实例

在vuex中将各个vuex文件在index中加载

// 解决vuex命名冲突，为所有的vuex模块添加namespaced: true
const modules = {
    
    }
const files = require.context('./modules', false, /\.ts$/)
files.keys().forEach((key) => {
    
    
  modules[key.replace(/(modules|\/|\.|ts)/g, '')] = {
    
    
    ...files(key).default,
    namespaced: true
  }
})

const store = createStore({
    
     modules })
export default store