Use require.context implement front-end engineering automation

What is require.context

A webpack of api, by performing require.context function to get a particular context, is mainly used to automate the import module, the front-end engineering, if you encounter a folder from the introduction of modules in many cases, you can use this api, it will traverse specified file folder, and then automatically imported, so that no explicit each call the import module import.

require.context function takes three parameters

  • directory {String} - reading a file path

  • useSubdirectories {Boolean} - whether traverse the file subdirectory

  • regExp {RegExp} - regular matching file

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

It is noted that the function execution returns require.context a function, and this function has three properties

  • resolve {Function} - accepts a parameter request, request matches the relative path to the file following test folder, return the document to match the relative path with respect to the entire project

  • keys {Function} - Returns an array of names of modules consisting successfully matched

  • id {String} - id execution environment, a string returns, mainly used in module.hot.accept, heat should be loaded

As these properties are a function of three (note that as a function of the properties, functions are objects, a corresponding attributes)

require.context Another popular place is the svg icons, you can not import the icon file each time, compared to the previous iconfont, svg there are many benefits highly recommended, you can see the details

Hand touch hands with your elegant use icon: juejin.im/post/59bb86...

You can use require.context only global registration of these very common infrastructure components. cn.vuejs.org/v2/guide/co...

Author: Heart _c2a2 link: www.jianshu.com/p/c894ea00d... Source: Letters of Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.

Reproduced in: https: //juejin.im/post/5d0304a2e51d451063431802

Guess you like

Origin blog.csdn.net/weixin_34337265/article/details/93170910