在開發(fā)vue項(xiàng)目過程中，如果路由、組件等過多的話，注冊(cè)起來是一件很麻煩的事情，這里引入自動(dòng)化注冊(cè)會(huì)很大程度上減少工作量。
webpack使用 require.context 可以動(dòng)態(tài)引入文件,我們可以借助這個(gè)方法實(shí)現(xiàn)自動(dòng)化注冊(cè)。

一、 require.context

1. require
const func = require('./dir/first.js');我們可以通過這個(gè)方法讀取一個(gè)文件中的內(nèi)容，這里一定要注意文件的路徑要寫對(duì)，不然會(huì)訪問不到文件。
2. require.context
   在剛才的過程中，webpack 會(huì)創(chuàng)建一個(gè) require.context ，通過正則匹配到可能的文件，全部引入。如果我們想自定義這個(gè)正則規(guī)則的話，可以自己寫一個(gè) require.context 。
   語法：require.context('./dir', true, /\.js$/)；第一個(gè)參數(shù)表示相對(duì)的文件目錄，第二個(gè)參數(shù)表示是否包括子目錄中的文件（true，false），第三個(gè)參數(shù)表示引入的文件匹配的正則表達(dá)式。
   實(shí)例：

const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]

二、開發(fā)實(shí)例

1. 自動(dòng)化部署路由

//./router/index.js

//404中轉(zhuǎn)頁面
import Transit from '@/page/Transit'

//自動(dòng)化部署
const requireComponent = require.context('../page', true, /\.vue$/);
const routes = requireComponent.keys().map(fileName => {
    // 獲取組件配置
    const componentConfig = requireComponent(fileName);
    // 剝?nèi)ノ募_頭的 `./` 和`.vue`結(jié)尾的擴(kuò)展名
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局注冊(cè)組件
    const component = Vue.component(
        componentName.replace(/\//,'-'),
        // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，那么就會(huì)優(yōu)先使用 `.default`，否則回退到使用模塊的根。
        componentConfig.default || componentConfig
    );
    return {
        path: '/'+componentName,
        name: componentName.replace(/\//,'-'),
        component
    }
});

//添加404頁面
let notFoundPage = {
    path: '*',
    name: '404',
    component: Transit
};
routes.push(notFoundPage);

Vue.use(Router);

export default new Router({
    routes
})

2. 自動(dòng)化注冊(cè)全局組件

//main.js
//自動(dòng)化注冊(cè)全局組件
const requireComponent = require.context('./components/global', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
    // 獲取組件配置
    const componentConfig = requireComponent(fileName);
    // 剝?nèi)ノ募_頭的 `./` 和`.vue`結(jié)尾的擴(kuò)展名
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局注冊(cè)組件
    const component = Vue.component(
        componentName.replace(/\//,'-'),
        componentConfig.default || componentConfig
    );
});

欲望以提升熱忱，毅力以磨平高山。