require.context

带表达式的 require 语句

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

require("./template/"   name   ".ejs");

webpack 解析 require() 的调用，提取出来如下这些信息：

Directory: ./template
Regular expression: /^.*\.ejs$/

则会返回template目录下的所有后缀为.ejs模块的引用，包含子目录。

require.context

可以使用 require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：

要搜索的文件夹目录
是否还应该搜索它的子目录，
以及一个匹配文件的正则表达式。

require.context(directory, useSubdirectories = false, regExp = /^\.\//)require.context("./test", false, /\.test\.js$/);//（创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。require.context("../", true, /\.stories\.js$/);//（创建了）一个包含了父级文件夹（包含子目录）下面，所有文件名以 `.stories.js` 结尾的文件的上下文。

require.context模块导出（返回）一个（require）函数，这个函数可以接收一个参数：request 函数–这里的 request 应该是指在 require() 语句中的表达式

导出的方法有 3 个属性： resolve, keys, id。

resolve 是一个函数，它返回请求被解析后得到的模块 id。
keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

Vue 全局组件：


module.exports.install = function (Vue) {/*所有在./components目录下的.vue组件自动注册为全局组件以<mv-***></mv-***>为组件标签名，***是组件的.name，没有name的时候是组件的文件名*/const requireAll = context => context.keys().map(context);const component = require.context('./components', false, /\.vue$/);// const directive = require.context('./directives', false, /\.js$/);requireAll(component).forEach((item) => {const name = (item.name || /(\S \/)(\S )\.vue/.exec(item.hotID)[2]).toLowerCase();Vue.component(`mv-${name}`, item);});};

/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/const files = require.context('./modules', false, /\.js$/)
console.log('------------')
console.log(files.keys())
console.log('------------')
const modules = {}files.keys().forEach(key => { modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})console.log('------------')
console.log(modules)
console.log('------------')
export default modules

要引入svg下面所有的svg文件：在该文件（icons）目录下新建一个js文件index.js 写如下代码：

let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)

Vue 全局组件

const requireAll = context => context.keys().map(context);const component = require.context('./components', false, /\.vue$/);   // false 不遍历子目录，true遍历子目录requireAll(component).forEach(({default:item}) => {console.log(item)Vue.component(`wb-${item.name}`, item);
});

首字母大写

Object.keys(components).forEach((key) => {var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写Vue.component(`v${name}`, components[key])
})

利用require.context遍历目录所有图片

G:\Code\Vue\vue-global-component\src\assets>tree /f
卷 其它 的文件夹 PATH 列表
卷序列号为 1081-0973
G:.
│  logo.png
└─kittenskitten1.jpgkitten2.jpgkitten3.jpgkitten4.jpg

加载所有的图片

<template><div id="app"><img src="@/assets/logo.png"><li v-for="item in images"><h3>Image: {{ item }}</h3><img :src="imgUrl(item)"></li></div>
</template><script>var imagesContext = require.context('@/assets/kittens/', false, /\.jpg$/);console.log(imagesContext)console.log(imagesContext('./kitten1.jpg'))console.log(imagesContext.keys())export default {created: function() {this.images = imagesContext.keys();},name: 'haha',data() {return {images: [],msg: 'Welcome to Your Vue.js App'}},methods: {imgUrl: function(path) {//console.log('Path:'   path);return imagesContext(path)}}}
</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}h1,h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
</style>