随着项目的复杂，文件结构越来越多，Store中modules中的文件也越来越多，如果一个一个加载是不是很麻烦呢？
先看一个项目中store项目结构：
过去都是通过import分别引入文件：
1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 4 Vue.use(Vuex); 5 6 import user from './modules/user'; 7 import info from './modules/info'; 8 //此处省略N多文件。。。。。 9 10 export default new Vuex.Store({11 modules: {12 user,13 info14 },15 }); 通过上述引入虽然可以达成效果但是如果有很多文件呢？难道也要一个一个引入？那么如何动态加载modules文件下的所有JS文件呢？
那么这里就会用到webpack文档中的require.context( ) ，来实现前端工程化；
require.context( )语法如下：
require.context(directory, useSubdirectories = false, regExp = /^.//);
示例:
require.context("./test", false, /\.test\.js$/); // （你创建了）一个test文件夹下面（不包含子目录），能被require请求到，所有文件名以 `.test.js` 结尾的文件形成的上下文（模块）。require.context("../", true, /\.stories\.js$/); // （你创建了）一个父级文件夹下面（包含子目录），所有文件名以 `.stories.js` 结尾的文件形成的上下文（模块）。 那么我们怎么把它应用到Vue项目当中呢？
1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 import camelcase from 'camelcase’; //驼峰命名的一个npm包 4 Vue.use(Vuex); 5 6 const context = require.context('./modules', false, /\.js$/); 7 //获取moudules文件下所有js文件； 8 const moduleStores = {}; 9 10 context.keys().forEach(key => {11 // context.keys() 返回匹配成功模块的名字组成的数组12 const fileName = key.slice(2, -3);13 //截取名字14 const fileNameInCamelCase = camelcase(fileName);15 //camelcase 是一个驼峰命名包；16 const fileModule = context(key).default;17 //通过 context(key)导出文件内容。在文件中时通过 export.default 导出的，所以后边加.default18 moduleStores[fileNameInCamelCase] = {19 ...fileModule,20 namespaced: true, //文件中有写可以省略；不过这样写可以不用给每个文件写入；这个属性不知道自己去查文档；21 };22 });23 24 export default new Vuex.Store({25 modules: {26 ...moduleStores,27 },28 }); 通过以上方法就可以动态的导入modules文件夹中的所有js文件，这样就方便管理了，也不用一个个引入；
如果你某个文件不想引入可以在forEach中，通过判断来解决：
1 context.keys().forEach(key => { 2 const fileName = key.slice(2, -3); 3 const fileNameInCamelCase = camelcase(fileName); 4 const fileModule = context(key).default; 5 6 if (fileName === 'user') { 7 return; 8 } 9 moduleStores[fileNameInCamelCase] = {10 ...fileModule,11 namespaced: true,12 };13 });
管理依赖-webpack中文档(2.2)-更多详细内容可查 ：