{enforce: 'pre',include: [path.resolve(__dirname, './src/routes/lazyRoutes.js'),],use: {loader: path.resolve(__dirname, './tool/scripts/lazyRouteLoader.js'),},
}

function routeLoader(staticCode) {// --- step 1 读入源数据 ---// staticCode 字符串是 lazyRoutes.js 静态代码，读入源数据可以选用以下任一种方式// 1. 我们可以在 lazyRoutes.js 写入静态代码当成源数据使用// 2. 透过设定环境变数从 process.env 中拿取源数据// 我们假设 step 1 后能取得以下的信息const metadata = {"/module1": {"name": "routes/module1","chunkName": "module1",},"/module2": {"name": "routes/module2","chunkName": "module2",},};// --- step 2 依所需整理源数据 ---// 从环境变数 process.env 中拿取要挑选的 modulesconst picks = proccess.env.PICKS // ["/module2"]// 透过 picks 和 metadata 组出以下信息const filterModules = {"/module2": {"name": "routes/module2","chunkName": "module2",},};// --- step 3 输出我们挑的模组代码 ---const modulesKey = Object.keys(filterModules);return `import asyncComponent from 'core/asyncComponent';${modulesKey.map((key, index) => {const route = filterModules[key];return `const com${index} = asyncComponent(() => {return import('${route.name}' /* webpackChunkName:"${route.chunkName}" */);});`;}).join('')}const routes = [${modulesKey.map((key, index) => {const route = filterModules[key];return `{path: '${key}',chunkName: '${route.chunkName}',name: '${route.name}',Component: com${index},},`;}).join('')}];export default routes;`;
}

import asyncComponent from 'core/asyncComponent';const com0 = asyncComponent(() => {return import('routes/module2' /* webpackChunkName:"module2" */);
});const routes = [{path: '/module2',chunkName: 'module2',name: 'routes/module2',Component: com0,
},];
export default routes;

<Router history={history}>{routes.map(({ path, Component }) =><Route key={path} path={path} render={props => <Component {...props} />} />)}
</Router>