在写前端UI文档说明手册时,发现项目中需要弄很多的md文件,用于演示,这时在webpack.base.conf.js中写了一段
webpack.base.conf.js
const fs = require('fs')
const fileArray = fs.readdirSync('./examples/docs')
/***
* 缓存md文件
* @returns {string}
*/
function getFileArray() {
let obj = {};
for(let i=0;i<fileArray.length;i++){
let name = fileArray[i];
obj[name] = fs.readdirSync('./examples/docs/'+name+'/td');
}
return JSON.stringify(obj);
}
module.exports中添加如下代码,这样就实现了动态加载所有md文件用于展示了
externals: {
mdfile: getFileArray()
}
fs读取文件在组件中不能使用,只有在conf文件中才能执行,还有就是conf文件中的外部变量定义采用externals,使用的时候在组件中写require('mdfile'),就能取到值, 如下所示。
let _this = this;
let mdFile = require('mdfile').checkbox;
for(let i=0;i<mdFile.length;i++){
_this.componentArray.push( resolve => { require(['./td/' + mdFile[i]], resolve) });
}