1. The target

  1. Learn to operate the basic FS and PATH modules of Node.
  2. Learn to automatically generate webPack multi-page entry files. The corresponding plug-in.


2. Know the premises

Webpacck manual multipage packaging can not, is to add multiple JS entry in the entry, and then add the corresponding multiple plug-ins in the HTmL-Web-plugin on the line. As follows:


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')})],... };Copy the code


3. Pre-knowledge

Take the directory structure of this image as a reference:

3.1 Basic use of fs module


var fs = require('fs'); Var dir = fs.readdirsync ()'./src/static/app');
[ 'css'.'index.html'.'js'.'lib'.'vue'Var stats = fs.statsync (); // 2.'./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: Cialis 10-29T14:58:39.284z, ctime: 2019-10-29T14:58:39.284z Cialis 10-29t14:58:39.284z, birthtime: cialis 10-29t14:19:06.386z} // 3. Stats.isdirectory (); stats.isFile();Copy the code


3.2 Basic use of the PATH module


var p = require('path'); // Provide platform-specific path fragment separators: p.sep. on POSIX:'foo/bar/baz'.split(path.sep); // Return: ['foo'.'bar'.'baz'[on Windows:'foo\\bar\\baz'.split(path.sep); // Return: ['foo'.'bar'.'baz'] // Change path to a complete path path.join()'/foo'.'bar'); // Return: /foo/bar // get the file suffix p.extname('a.js') // Return: jsCopy the code


4. Start the application

With that done, let’s write the code we want. The code we want is to iterate through all the JS files in the JS folder under a file.

This goal is a little difficult, so let’s break it down as follows.

  1. Walk through all files in the directory.
  2. Traverse all js files in the directory.
  3. Traverse all js files in the js folder in the directory.


To complete the first small goal, let’s think about the idea: iterate through the current file, iterate to determine whether it is a file, if it is a file, we will store, if it is not a file, it is a directory, then recursively do the above operation. Ok, let’s start our performance:

Object one code:

console.log(readdirAllFiles('src/static')); // Traverse all directoriesfunction readdirAllFiles(path) {
    var files = [];
    getFiles(path, files);
    returnfiles; } // Recursively iterate through all files stored in the files variable.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); }}); }Copy the code


Return result:


[ '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' 
  ]Copy the code



Objective 2 code: Adds a filter condition to this technique.


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); }}}); }Copy the code


Return result:


[ 
  'src/static/app/js/index.js'.'src/static/app/vue/index.js'.'src/static/app1/js/index.js'.'src/static/app1/vue/index.js' 
]Copy the code


Target is three: as long as the JS file under the JS folder


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); }}}); }Copy the code

Return result:


[ 
  'src/static/app/js/index.js'.'src/static/app1/js/index.js' 
]Copy the code


Get this, we also get the webpack entry file, get the entry file, HTMLWebPack generation is not difficult.


conclusion

Although we have code completion, function also is finished, but the above code is quite messy, if late to add functionality, only add the if of judgment, the problem for small tools: no problem, but if is a business, for programmers behind accept, is a great harm, so it is best not to write code. (A better solution is provided below.)


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());
Copy the code