前端路由webpack动态加载

[wisetc]

利用 webpack 的require.context方法可以动态的加载制定目录下的文件，该方法的返回值是一个对象，有.keys()方法和构造方法，可以 require 依赖文件。

文件匹配规则用的是/^(?!index).+\.jsx?$/，用于匹配非 index，且以 js 或 jsx 为后缀的文件。require.context的第二个参数表示是否遍历子目录。

import path from 'path';
import { kebabCase } from 'lodash';

import UnrentForm from '../pages/unrent/UnrentForm';
import FeeForm from '../pages/unrent/UnrentForm/FeeForm';

// 单独设置的视图
const excludePatternList = [/UnrentForm\.jsx$/i, /FeeForm\.jsx/i, /components/];

let routes = [];

const r = require.context('../pages/unrent', true, /^(?!index).+\.jsx?$/);
r.keys()
  .filter(key => !excludePatternList.some(p => p.test(key)))
  .forEach(key => {
    const name = path.basename(path.basename(key, '.jsx'), '.js');
    routes.push({
      exact: true,
      path: '/' + kebabCase(name),
      component: r(key).default,
      requiresAuth: true
    });
  });

routes = routes.concat(
  [
    {
      exact: false,
      path: '/unrent-form',
      component: UnrentForm,
      requiresAuth: true
    }
  ],
  {
    exact: true,
    path: '/unrent-form/fee-form',
    component: FeeForm,
    requiresAuth: true
  }
);

export default routes;