前言
隨着項目越來越大，業務需要越來越多，我們項目的目錄層級也是非常的多。如果還是通過import分別引入文件，那是非常的不科學的。
比如vue項目vuex文件非常多：
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); import user from './stores/user'; import info from './stores/info'; ... // 此處省略N多文件 export default new Vuex.Store({ modules: { user, info, ... }, }); 要是有幾個文件，還好。幾十個，幾百個，就非常頭疼了。怎么解決這個問題了？
我們就要用到 webpack 中的require.context()方法，動態加載某個文件夾下的所有js文件，是不是就解決問題了呢！下面看看require.context()如何使用。
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項目中？
Vue項目中，使用require.context()
import Vue from 'vue' import Vuex from 'vuex' import { sync } from 'vuex-router-sync' import App from './App' import router from './router' const strict = process.env.NODE_ENV !== 'production' Vue.config.productionTip = false 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 }) Vue.use(Vuex) const store = new Vuex.Store({ modules, strict }) sync(store, router) new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) 通過以上方法就可以動態的導入stores文件夾中的所有js文件，這樣就方便管理了，也不用一個個引入， 同理，如果路由文件等非常多，也可以用require.context()導
全局過濾器導入
Vue.use((Vue) => { ((requireContext) => { const arr = requireContext.keys().map(requireContext); (arr || []).forEach((filter) => { filter = filter.__esModule && filter.default ? filter.default : filter; Object.keys(filter).forEach((key) => { Vue.filter(key, filter[key]); }); }); })(require.context('./filters', false, /^\.\/.*\.js$/)); });廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
全局指令導入
Vue.use((Vue) => { ((requireContext) => { const arr = requireContext.keys().map(requireContext); (arr || []).forEach((directive) => { directive = directive.__esModule && directive.default ? directive.default : directive; Object.keys(directive).forEach((key) => { Vue.directive(key, directive[key]); }); }); })(require.context('./directives', false, /^\.\/.*\.js$/)); }); 總結
webpack作為前端構建的打包工具， 把各種資源，例如JS（含JSX）、coffee、css（含less/sass）、圖片等都作為模塊來處理和使用，它已經做了非常好了，它還有非常多的功能等待我們去發掘，研究。