一文说明白 webpack require.context的使用

如下目录：

index.js 代码：

/**
 * 动态加载 modules 中的vuex模块
 * @returns
 */
function loadModules() {
  const modulesFiles = require.context("./modules", true, /\.(j|t)s$/i);
  const regx = /^\.\/(.*)\.\w+$/;
  const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(regx, "$1");
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
  }, {});
  return modules || {};
}

vue全局注册组件

只要在main.js里引入这个index.js文件，然后vue.use()注册，就可以在所有页面调用/components文件夹下的所有组件了。而不需要手动import需要的组件。

index.js

function changStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)  
}
export default {
    install(Vue) {
        const requireAll=require.context("./components",false,/.vue$/)
        requireAll.keys().forEach((item)=>{
            Vue.component(changStr(item.replace(/.//,'').replace(/.vue$/,'')),requireAll(item).default)
        })
    }
}

vue路由模块化

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const routerList = [];
function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default);
    });
}
importAll(require.context("../routes", true, /.routes.js/)); //获取的是routes下以.routes.js结尾的文件
const routes = [
    ...routerList,
];

const router = new VueRouter({
    routes,
});

export default router;

批量加载svg图标：

const context = require.context("./svgs", true, /\.svg$/)
context.keys().forEach(context) //not used
let modules = context.keys().map(context)
console.log(modules)

require.context说明：

ps:常用的使用场景：

1. icon图标组件加载

2. 路由模块批量加载

3. 全局组件批量加载

4. store模块的加载