美文网首页
vuex前端工程化之动态导入文件--require.contex

vuex前端工程化之动态导入文件--require.contex

作者: Jony0114 | 来源:发表于2019-12-12 19:49 被阅读0次

    require.context是webpack中,用来创建自己的(模块)上下文

    webpack会在构建的时候解析代码中的require.context()

    require.context函数接收三个参数:

    要搜索的文件夹目录

    是否还应该搜索它的子目录

    以及一个匹配文件的正则表达式

    require.context(directory, useSubdirectories = false, regExp = /^\.\//);

    // 示例

    require.context('./test', false, /\.test\.js$/);

    // (创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。

    创建了一个包含了test文件夹(不包含子目录)下面的所有文件名以'.test.js'结尾的能被require请求到的文件上下文

    案例探索之继续深究

    我们来结合一个例子看一下:

    constfiles =require.context('./assets/images',false, /\.png$/);

    iles可以看到,是一个函数,意思就是说,require.context模块导出(返回)一个(require)函数。

    这个函数有三个属性(没错又是3个,别忘了,函数也是对象,所以也是有属性的):

    resolve:是一个函数,它返回请求被解析后得到的模块 id。

    keys:也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。

    id:是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

    相关文章

      网友评论

          本文标题:vuex前端工程化之动态导入文件--require.contex

          本文链接:https://www.haomeiwen.com/subject/vkatnctx.html