Webpack require.context() 前端工程化之动态导入文件

随着项目越来越大，业务需要越来越多，我们项目的目录层级也是非常的多。
如果还是通过import分别引入文件，那是非常的不科学的。
要是有几个文件，还好。几十个，几百个，就非常头疼了。
怎么解决这个问题呢？

比如vue项目要导入的文件非常多：

import user from './stores/user';
import info from './stores/info';
import util from './stores/util';
... // 此处省略N多文件

export default new Vuex.Store({
  modules: {
      user,
      info,
      util,
      ...
  },
});

我们就要用到 Webpack 中的 require.context() 方法，
动态加载某个文件夹下的所有JS文件，是不是就解决问题了呢！
下面看看 require.context() 如何使用。

语法

require.context(directory, useSubdirectories = false, regExp = /^.//);

示例

// 一个test文件夹下面（不包含子目录），能被require请求到，所有文件名以 `.test.js` 结尾的文件形成的上下文（模块）。
require.context("./test", false, /\.test\.js$/);

// 一个父级文件夹下面（包含子目录），所有文件名以 `.stories.js` 结尾的文件形成的上下文（模块）。
require.context("../", true, /\.stories\.js$/);

Vue项目中，使用require.context()

const modules = {}
// 获取stores文件夹下所有js文件
let requireContext = require.context('./stores', true, /^\.\/.*\/index\.js$/)
// requireContext.keys() 返回匹配成功模块的名字组成的数组
requireContext.keys().forEach((key) => {
  // 通过 requireContext(key)导出文件内容
  const mod = requireContext(key)
  modules[key.slice(2, -9)] = mod.__esModule && mod.default ? mod.default : mod
})

const store = new Vuex.Store({
  modules,
})

通过以上方法就可以动态的导入stores文件夹中的所有js文件，
这样就方便管理了，
也不用一个个引入，
同理，
如果路由文件等非常多，
也可以用 require.context() 导入。