webpack有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块,在优化了依赖树后,每一个异步区块都作为一个文件被打包。
上下文模块有6种类型,分别为sync/lazy/lazy-once/eager/weak/sync-weak
./locales/${language}.json
),其中可能含有多个被请求的模块路径。例子:当前vue文件为Home.vue,同级菜单有一个文件夹pages,它里面有三个文件a.vue, b.vue, c.vue
// 把Home, a, b, c分别打包到不同的chunk中 import('./pages/' + pageId) // 把Home打成一个chunk,a/b/c统一打包到一个chunk import(/* webpackMode: "lazy-once" */ './pages/' + pageId) // 把Home, a, b, c打包到一个chunk中,且a/b/c中的代码只有在import之后执行(不在chunk加载时执行) import(/* webpackMode: "eager" */ './pages/' + pageId)
注意:即使没有引用pages里面的某个文件,也会对其进行打包!
通过上下文组件请求的实际路径是相对于指定目录的相对路径;在这里相对于‘/pages’上下文的路径,即’./a.vue’, ‘./b.vue’, ‘./c.vue’
require(./locale/${language}.js
) 会把匹配到的文件打包进去
require.context( (directory: String), (includeSubdirs: Boolean) /* 可选的,默认值是 true */, (filter: RegExp) /* 可选的,默认值是 /^.\/.*$/,所有文件 */, (mode: String) /* 可选的, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once',默认值是 'sync' */
一个 context module 会导出一个(require)函数,此函数可以接收一个参数:request。
此导出函数有三个属性:resolve, keys, id。
例子:
与当前文件index.js同级目录modules有 aaa/index.js和bbb/index.js两个文件
const modulesFiles = require.context('./modules', true, /index.js$/) console.log('modulesFiles:', modulesFiles) // ƒ webpackContext(req) { // var id = webpackContextResolve(req); // return __webpack_require__(id); // } console.log('modulesFiles.keys:', modulesFiles.keys()) // ['./aaa/index.js', './bbb/index.js'] console.log('modulesFiles.resove:', modulesFiles.resolve('./bbb/index.js')) // ./src/store/modules/bbb/index.js console.log('modulesFiles.id:', modulesFiles.id) // ./src/store/modules sync recursive index.js$ export const modules = modulesFiles.keys().reduce((res, modulePath) => { const pathName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') const moduleName = pathName.replace('/index', '') const module = modulesFiles(modulePath) const dModuleName = module.default.name || '' console.log('modulePath:', modulePath) console.log('moduleName:', moduleName) console.log('module:', module) res[dModuleName || moduleName] = module.default console.log('res:', res) return res }, {})
import( /* webpackInclude: /\.json$/ */ /* webpackExclude: /\.noimport\.json$/ */ /* webpackChunkName: "my-chunk-name" */ /* webpackMode: "lazy" */ /* 'eager' | 'weak' | 'lazy' | 'lazy-once',默认值是 'lazy' */ /* webpackPrefetch: true */ /* webpackPreload: true */ /* webpackIgnore: false */ /* 将 webpackIgnore 设置为 true 则不进行代码分割 */ `./locale/${language}` )
require.ensure()已被import()代替
代码运行时通过判断环境变量(例如process.env.NODE_ENV===‘production’),只会打包满足判断条件逻辑分支的请求!!!;
export function getBaseUrl () { if (process.env.NODE_ENV === 'production') { require('@/prod.host.js') return '/performance/' } else { const requireHostFiles = require.context('@/api', false, /devHost.js$/) return requireHostFiles.keys().includes('./devHost.js') ? requireHostFiles('./devHost.js').devHost : require('@/dev.host.js').devHost } }
如果process.env.NODE_ENV === ‘production’,只会打包 ‘@/prod.host.js’
否则会打包 ‘@/api’下的直属下属文件中满足 /devHost.js$/ 正则的文件, 以及 ‘@/dev.host.js’