node 自动化webpack多页面打包原理
1. 目标
- 学会node 的基本fs,path模块的操作。
- 学会自动生成webpack多页面入口文件。即对应插件。
2. 已知前提
webpacck 手动多页面打包不能，就是在entry中增加多个js入口，然后在html-web-plugin 中增加对应的多个插件就行了。如下：
module.exports = {
entry: {
app: './src/main.js',
tech: './src/main-tech.js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
chunks: ['app'],
inject: true,
favicon: resolve('favicon.ico')
}),
new HtmlWebpackPlugin({
filename: 'index-tech.html',
template: './index-tech.html',
chunks: ['tech'],
inject: true,
favicon: resolve('favicon.ico')
})
],
.....
};
3. 前置知识
以此图片的目录结构为参考：
image.png
3.1 fs模块的基本使用
var fs = require('fs');
// 1.读取某个路径下的，文件或者文件夹
var dir = fs.readdirSync('./src/static/app');
[ 'css', 'index.html', 'js', 'lib', 'vue' ]
// 2. 读取文件的基本状态
var stats = fs.statSync('./src/static/app');
Stats {
dev: 16777220,
mode: 16877,
nlink: 7,
uid: 501,
gid: 20,
rdev: 0,
blksize: 4096,
ino: 19101823,
size: 224,
blocks: 0,
atimeMs: 1572683545246.8923,
mtimeMs: 1572361119284.481,
ctimeMs: 1572361119284.481,
birthtimeMs: 1572358746385.501,
atime: 2019-11-02T08:32:25.247Z,
mtime: 2019-10-29T14:58:39.284Z,
ctime: 2019-10-29T14:58:39.284Z,
birthtime: 2019-10-29T14:19:06.386Z
}
// 3. 判断是文件夹，判断是文件么
stats.isDirectory();
stats.isFile();
3.2 path模块的基本使用
var p = require('path');
// 提供平台特定的路径片段分隔符：
p.sep
在 POSIX 上：
'foo/bar/baz'.split(path.sep);
// 返回: ['foo', 'bar', 'baz']
在 Windows 上：
'foo\\bar\\baz'.split(path.sep);
// 返回: ['foo', 'bar', 'baz']
// 将path变成一个完成的路径
path.join('/foo', 'bar');
// 返回： /foo/bar
// 得到文件后缀
p.extname('a.js')
// 返回： js
4. 开始应用
前置知识学完了，我们开始写我们的想要的代码，我们想要的代码是遍历一个文件目下的的所有js文件夹的js文件。
这个目标有点困难，我们把目标进行拆成如下。
- 遍历目录下所有的文件。
- 遍历目录下所有的js文件。
- 遍历目录下所有的js文件夹的js文件。
先来完成第一个小目标，我们先思考下思路：遍历当前文件，遍历判断是都是文件，如果是文件，我们进行存储，如果不是文件，是目录，则递归进行如上操作。思路ok了， 开始我们的表演：
目标一代码：
console.log(readdirAllFiles('src/static'));
// 遍历所有的目录
function readdirAllFiles(path) {
var files = [];
getFiles(path, files);
return files;
}
// 递归遍历所有的文件存放在files变量中。
function getFiles(path, files) {
var dirs = fs.readdirSync(path);
dirs.forEach((dir) => {
var childPath = p.join(path, dir);
var stats = fs.statSync(childPath);
if (stats.isDirectory()) {
getFiles(childPath, files);
}
if (stats.isFile()) {
files.push(childPath);
}
});
}
返回结果：
[ 'src/static/app/css/index.less',
'src/static/app/css/w.less',
'src/static/app/index.html',
'src/static/app/js/index.js',
'src/static/app/vue/components/silder-like-item.vue',
'src/static/app/vue/components/silder-like.vue',
'src/static/app/vue/index.js',
'src/static/app1/css/index.less',
'src/static/app1/index.html',
'src/static/app1/js/index.js',
'src/static/app1/vue/components/silder-like-item.vue',
'src/static/app1/vue/components/silder-like.vue',
'src/static/app1/vue/index.js'
]
目标二代码： 在此技术上增加一个过滤的条件。
console.log(readdirAllFiles('src/static', '.js'));
function readdirAllFiles(path, filesType) {
var files = [];
getFiles(path, filesType, files);
return files;
}
function getFiles(path, ext, files) {
var dirs = fs.readdirSync(path);
dirs.forEach((dir) => {
var childPath = p.join(path, dir);
var stats = fs.statSync(childPath);
if (stats.isDirectory()) {
// todo
getFiles(childPath, ext, files);
}
if (stats.isFile()) {
if (!ext) {
return files.push(childPath);
}
if (ext && p.extname(childPath) === ext) {
files.push(childPath);
}
}
});
}
返回结果：
[
'src/static/app/js/index.js',
'src/static/app/vue/index.js',
'src/static/app1/js/index.js',
'src/static/app1/vue/index.js'
]
目标是三：只要js文件夹下面的js文件
console.log('------------------------------------');
console.log(readdirAllFiles('src/static', '.js', 'js'));
console.log('------------------------------------');
function readdirAllFiles(path, filesType, belongto) {
var files = [];
getFiles(path, filesType, belongto, files);
return files;
}
function getFiles(path, ext, belongto, files) {
var dirs = fs.readdirSync(path);
dirs.forEach((dir) => {
var childPath = p.join(path, dir);
var stats = fs.statSync(childPath);
if (stats.isDirectory()) {
// todo
getFiles(childPath, ext, belongto, files);
}
if (stats.isFile()) {
if (belongto) {
var relativePath = p.join(belongto, dir);
if (childPath.indexOf(relativePath) > -1) {
// todo
if (!ext) {
return files.push(childPath);
}
if (ext && p.extname(childPath) === ext) {
files.push(childPath);
}
}
return;
}
// todo
if (!ext) {
return files.push(childPath);
}
if (option.pathType && p.extname(childPath) === option.pathType) {
files.push(childPath);
}
}
});
}
返回结果：
[
'src/static/app/js/index.js',
'src/static/app1/js/index.js'
]
拿到这个，我们也算拿到了webpack的入口文件，拿到入口文件，htmlwebpack生成就不是难事了。
结束语
虽然我们的代码完成了，功能也完成了，但是上面写的代码挺乱的，如果后期继续加功能，只能不停的加if判断，这个对于小工具没有问题问题，但是如果是业务的话，对于后面接受的程序员，是一种巨大的伤害，所以最好不要这么写代码。（下面提供了一种比较好的方案）
class ReaddirAllFiles {
constructor(path, option) {
this.path = path;
this.option = option;
}
start() {
var files = [];
this.getFiles(this.path, files);
return files;
}
getFiles(path, files) {
var { ext, belongto } = this.option;
var dirs = fs.readdirSync(path);
dirs.forEach((dir) => {
var childPath = p.join(path, dir);
var stats = fs.statSync(childPath);
if (stats.isDirectory()) {
// todo
this.getFiles(childPath, files);
}
if (stats.isFile()) {
if (belongto) {
this.handerbelongto(childPath, belongto, dir, ext, files);
return;
}
this.handerExt(ext, childPath, files);
}
});
}
handerbelongto(childPath, belongto, dir, ext, files) {
var relativePath = p.join(belongto, dir);
if (childPath.indexOf(relativePath) > -1) {
// todo
this.handerExt(ext, childPath, files);
}
}
handerExt(ext, childPath, files) {
// todo
if (!ext) {
return files.push(childPath);
}
if (ext && p.extname(childPath) === ext) {
files.push(childPath);
}
}
}
var flis = new ReaddirAllFiles('src/static', {
ext: '.js',
belongto: 'js'
});
console.log(flis.start());
