webpack 多页面 自定义entry

背景

webpack 配置多页面，自定义入口，需要一些对entry的封装操作

功能

1. 自动获取页面入口
2. 自定义配置页面入口 npm run dev -- --pages=detail

code

const path = require('path');
const glob = require('glob');
const argvYargs = require('yargs').argv; // "yargs": "^13.2.1"

const resolvePath = (dir) => {
    return path.resolve(__dirname, './', dir);
};
let entryPath = 'src/js';
if (argvYargs.pages) {
    entryPath = 'src/js/+(';
    let pages = argvYargs.pages.split(',');
    for (let i = 0; i < pages.length; i++) {
        if (i === pages.length - 1) {
            entryPath += `${pages[i]})`;
        } else {
            entryPath += `${pages[i]}|`;
        }
    }
}
let entries = (entryPath => {
    let files = {},
        excludes = [],
        filesPath,
        ignoreDirs = ['lib', 'commons', 'components', 'zdm_ui'];
    ignoreDirs.forEach(dir => {
        excludes.push(path.join(entryPath, '/**/' + dir + '/**/*.js'));
    });
    // console.log('excludes', excludes);
    filesPath = glob.sync(`${entryPath}/**/*.js`, {
        ignore: excludes
    });
    filesPath.forEach((entry, index) => {
        let chunkName = path.relative('src/js', entry).replace(/\.js$/i, '');
        files[chunkName] = resolvePath(entry);
    });
    return files;
})(resolvePath(entryPath));

let pages = Object.keys(entries);

const devConfig = {
    entry: entries,
};

pages.forEach(item => {
    if (item !== 'framework') {
        devConfig.plugins.push(new HtmlWebpackPlugin({
            filename: resolvePath(`dist/pages/${item}.html`),
            template: resolvePath(`src/tpl/${item}.ejs`),
            chunks: ['manifest', 'vendors', item],
            heads: ['manifest', 'vendors'],
            bodys: [item],
            inject: false
        }));
    }
});
module.exports = devConfig