stay hungry stay foolish

webpack的动态引入与动态加载

动态引入文件

有时我们想动态引入某个文件夹下的所有模块,文件名称事先是不知道的,这时可以使用 require.context 来实现该需求

mod/mod1.js:

export default {
	name : 'mod1'
}

mod/mod2.js:

export default {
	name : 'mod2'
}

index.js

const files = require.context('./mod', false, /\.js$/) //第一个参数可以使用正则,第二个参数用来指定是否要递归子目录
const modules = {}

files.keys().forEach(key => {
	console.log(key,files(key).default.name);
    modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
})

export default modules;

运行结果:

动态加载模块

(一)vue路由的的动态加载:

    {
      path: '/',
      name: 'Content',
      component: resolve => require(['@/pages/Content'], resolve)
    }

或者使用 es6 的方式

    {
      path: '/',
      name: 'Content',
      component: () => import('@/pages/Content')
    }

(二)模块的动态加载

	require.ensure([], (require)=>{ //懒加载阿里云sdk
		var OSS = require('ali-oss');
		this._initOSS(OSS);
	});

或者使用 es6 的方式

	import('ali-oss').then((OSS)=>{
		this._initOSS(OSS);
	});