webpack中的require.context

webpack文檔中的使用姿勢

帶表達式的require語句

如果你的 request含有表達式(expressions)，就會創建一個上下文(context)，因為在編譯時(compiletime)並不清楚具體導入哪個模塊。

示例：

require('./template/' + name + '.ejs');

webpack 解析 require() 調用，然后提取出如下一些信息：

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

context module

生成一個 contextmodule(上下文模塊)。它包含目錄下的所有模塊的引用，是通過一個request解析出來的正則表達式，去匹配目錄下所有符合的模塊，然后都 require 進來。此 context module 包含一個 map 對象，會把 request 中所有模塊翻譯成對應的模塊 id。

示例：

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/folder.ejs": 44
}

此 context module 還包含一些訪問這個 map 對象的 runtime 邏輯。

這意味着 webpack能夠支持動態地require，但會導致所有可能用到的模塊都包含在 bundle 中。

require.context

你還可以通過 require.context() 函數來創建自己的context。

可以給這個函數傳入三個參數：一個要搜索的目錄，一個標記表示是否還搜索其子目錄， 以及一個匹配文件的正則表達式。

webpack 會在構建中解析代碼中的 require.context() 。

語法如下：

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

示例：

require.context('./test', false, /\.test\.js$/);
// （創建出）一個 context，其中文件來自 test 目錄，request 以 `.test.js` 結尾。

require.context('../', true, /\.stories\.js$/);
// （創建出）一個 context，其中所有文件都來自父文件夾及其所有子級文件夾，request 以 `.stories.js` 結尾。

傳遞給 require.context 的參數必須是字面量(literal)！

context module API

一個 context module會導出一個（require）函數，此函數可以接收一個參數：request。

此導出函數有三個屬性：resolve, keys, id。

• resolve 是一個函數，它返回 request 被解析后得到的模塊 id。

• keys 也是一個函數，它返回一個數組，由所有可能被此 context module 處理的請求（譯者注：參考下面第二段代碼中的 key）組成。

如果想引入一個文件夾下面的所有文件，或者引入能匹配一個正則表達式的所有文件，這個功能就會很有幫助，例如：

function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

var cache = {};

function importAll (r) {
  r.keys().forEach(key => cache[key] = r(key));
}

importAll(require.context('../components/', true, /\.js$/));
// 在構建時(build-time)，所有被 require 的模塊都會被填充到 cache 對象中。

• id 是 context module 里面所包含的模塊id.它可能在你使用 module.hot.accept 時會用到。

require.context應用場景

注冊全局組件

/*
   所有在./components目錄下的.vue組件自動注冊為全局組件
   以<mc-***></mc-***>為組件標簽名，***是組件的.name
*/
const requireContext = require.context('../components', true, /\.vue$/)
const requireAll = context => context.keys().map(context)

console.log(requireContext)
console.log(requireAll(requireContext))
export default (Vue) => {
  requireAll(requireContext).forEach(item => {
    Vue.component(`vc-${item.default.name}`, item.default)
  })
}

引入vuex的module

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文件

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

利用require.context遍歷目錄所有的圖片

<template>
  <div id="app">
    <li v-for="(img, index) in images" :key="index">
      <p>img: {{img}}</p>
      <img :src="imgUrl(img)" alt="">
    </li>
  </div>
</template>

<script>
const req = require.context('./assets/image', false, /(\.png|\.gif)$/)

export default {
  name: 'App',
  data () {
    return {
      images: []
    }
  },
  created () {
    this.images = req.keys()
  },
  methods: {
    imgUrl (path) {
      return req(path)
    }
  }
}
</script>

<style>
img {
  height: 30px;
}
</style>