利用 webpack 的 require.context 自动注

webpack 的 require.context 函数可以用来创建自己的 context。webpack 会在构建中解析代码中的 require.context()。

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

这行代码会去当前目录下的 test 文件夹 (不包括子目录) 下找所有以.test.js结尾的能被 require 的文件。
更直白地说就是，我们可以通过正则匹配引入相应的文件模块。

require.context 方法有三个参数：

• directory：要检索的目录
• useSubdirectories：是否检索子目录，默认是 true
• regExp：匹配文件的正则表达式

正文开始：

1. 我们先创建一个 GlobalComs 目录，里面放需要注册到全局的组件。建议只包含经常使用且体积不大的组件，不然打包出来的初始 js 太大就不好了。

   
   

2. 给组件提供name，不然注册时就采用.vue文件的文件名命名
   

   UploadSingle 组件

3. 在 GlobalComs 目录下新建一个index.js文件：

import Vue from 'vue'
// 自动注册全局组件
function registerAllComponents(requireContext) {
  return requireContext.keys().forEach(comp => {
    const vueComp = requireContext(comp)
    // default.name 就是我们 .vue 组件导出的 name
    // 这块逻辑需要根据自己的命名习惯去调整
    const compName = vueComp.default.name ? vueComp.default.name : /\/([\w-]+)\.vue$/.exec(comp)[1]
    Vue.component(compName, vueComp.default)
  })
}

// 注册当前目录下的所有 .vue 文件，包括子目录
registerAllComponents(require.context('./', true, /\.vue$/))

4. 在src/main.js导入这个文件即可：

// 自动注册全局组件
import './components/GlobalComs'

5. 可以在任意模版中愉快地直接使用了：

<template>
  <div class="app-container">
    ...
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryInfo.page"
      :limit.sync="queryInfo.pageSize"
      @pagination="fetchData"
    />
    <el-dialog>
      <upload-single v-model="newIslander.photoSrc" drag />
    </el-dialog>
    ...
  </div>
</template>

完事儿～