zoukankan      html  css  js  c++  java
  • webpack的带表达式require和require.context()方法

    带表达式的 require 语句
    如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入

    require("./template/" + name + ".ejs");
    1
    webpack 解析 require() 的调用,提取出来如下这些信息:

    Directory: ./template
    Regular expression: /^.*.ejs$/12
    1
    2
    会返回template目录下的所有后缀为.ejs模块的引用,包含子目录。

    require.context()
    可以使用 require.context() 方法来创建自己的(模块)上下文。

    这个方法有 3 个参数:

    要搜索的文件夹目录
    是否还应该搜索它的子目录
    以及一个匹配文件的正则表达式。
    require.context(directory, useSubdirectories, regExp);
    1
    使用:

    require.context("./test", false, /.test.js$/);
    //(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
    1
    2
    require.context("../", true, /.stories.js$/);
    //(创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。
    1
    2
    总结:

    require.context模块导出(返回)一个(require)函数。这个函数可以接收一个参数:request 函数——这里的 request 应该是指在 require() 语句中的表达式 。
    require.context 第一个参数不能是变量,webpack在编译阶段无法定位目录。
    导出的方法有 3 个属性: resolve, keys, id。
    resolve 是一个函数,它返回请求被解析后得到的模块 id。
    keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
    id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

  • 相关阅读:
    SpringBoot接口文件findBy方法写错导致抛出IllegalArgumentException
    用tomcat启动spring-boot
    Idea使用tool window中的persistence功能一键生成数据库实体
    Idea 启动 tomcat 报错
    详细梳理ajax跨域4种解决方案
    他们权利意识强,但是也会为生活牺牲很多
    每月碎碎念 | 2019.09
    说好不哭 我不会走
    css实现内容不相同的左右两个div等高
    简单了解css3轮廓outline
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/11988219.html
Copyright © 2011-2022 走看看