require.context實現引用全部js文件或svg文件

1. 引用一個目錄下的所有js文件

modules下

home.js
me.js
productList.js
user.js

實現

import home from './modules/home'
import me from './modules/me'
import productList from './modules/productList'
import user from './modules/user';

const modules = {
    home,
    me,
    productList,
    user
}

得到modules這么一個效果。

因為modules下會有很多module，也會動態添加新的module，每次都import略顯繁瑣，使用require.context可以實現一次引用全部
代碼如下：

const ctx = require.context('./modules/', true, /\.js$/)
const map = {}
for (const key of ctx.keys()) {
   let fileKey = key.replace(/\.\/|\.js/g,'');
   map[fileKey] = ctx(key).default
}

map就是想要得到的modules對象。

2. 引用一個目錄下的所有svg文件

requireSvgs () {
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('./assets/svg', false, /\.svg$/)
    requireAll(req)
}

調用requireSvgs方法，可以一次性引入assets/svg目錄下的所有.svg后綴的文件。

3. require.context的原理

require.context會被編譯為__webpack__require__的方式，打包之后，和其他的模塊引用完全一樣，所有可以完成放心的在項目里使用。
無論，在web項目，還是nodejs項目里面，只要走webpack，都沒有問題。比如上面modules下文件打包結果如下：

引用處:

var ctx = __webpack_require__("yhJU");
var map = {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
    for (var _iterator = ctx.keys()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var key = _step.value;

        var fileKey = key.replace(/\.\/|\.js/g, '');
        map[fileKey] = ctx(key).default;
    }
} catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
} finally {
    try {
        if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
        }
    } finally {
        if (_didIteratorError) {
            throw _iteratorError;
        }
    }
}

console.log(map);

exports.default = new _vuex2.default.Store({
    actions: actions,
    getters: getters,
    modules: map
});

關鍵的ctx就是__webpack_require__("yhJU")，yhJU代碼的模塊如下：

/***/ "yhJU":
/***/ (function(module, exports, __webpack_require__) {

var map = {
    "./home.js": "vhd+",
    "./me.js": "Zqav",
    "./productList.js": "Gsy1",
    "./user.js": "6ssc"
};
function webpackContext(req) {
    return __webpack_require__(webpackContextResolve(req));
};
function webpackContextResolve(req) {
    var id = map[req];
    if(!(id + 1)) // check for number or string
        throw new Error("Cannot find module '" + req + "'.");
    return id;
};
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "yhJU";

/***/ })

關鍵就是那個map對象，key是文件的相對路徑，后面是各個具體模塊的id，
webpack自動幫我們生成了一個包含所有模塊的map結構，引用了各個具體的模塊，與我們直接import效果一樣

4. require.context函數說明

require.context函數接受三個參數 

1. directory {String} -讀取文件的路徑
2. useSubdirectories {Boolean} -是否遍歷文件的子目錄
3. regExp {RegExp} -匹配文件的正則 

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

const ctx = require.context(...), ctx有3個方法

1. resolve {Function}  接收一個req參數，是模塊文件相對於js執行文件的路徑，返回模塊相對於整個工程的相對路徑

2. keys {Function} 返回匹配模塊的key，一般是個相對路徑，例如：./home.js

3. id {String}  包含map對象的模塊id，如第3節中的map模塊