前言：上一次我们实现了一个简单的自动化前端工程，今天我们对这个工程进行优化

本次目标：

1.自动生成页面模板
2.自动生成多入口
3.js抽离
复制代码

意义：

1.无需每次增加页面都要手动操作
2.提升webpack打包性能
复制代码

开始

1.js分离：

//webpack.base.config.js
//在plugins同层添加一个对象属性

 optimization: {
        // 找到chunk中共享的模块,取出来生成单独的chunk
        splitChunks: {
            chunks: "all",  // async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
            cacheGroups: {
                vendors: { 
                    name: "vendors",
                    priority: -10  // 抽取优先级
                },
            }
        },
        // 为 webpack 运行时代码创建单独的chunk
        runtimeChunk:{
            name:'manifest'
        }
    }
    
    //此代码将js抽离成一个webpack运行时文件，一个第三方库(包含node_module)和公共库文件，一个当前页面的主文件
复制代码

生成多页面配置

1.在webpack.base.config.js下引入fs模块

//fs模块是node.js的文件读取模块，利用这个模块可以方便读取文件夹内的文件（这里我们用到fs的同步读取文件夹的方法）
const fs = require('fs');
复制代码

2.在webpack.base.config.js下按照需要声明两个函数

// 生成一个页面模板数组
function htmlList() {
    let arr = fs.readdirSync(ENTRY_HTML);

    let templeteArr =  arr.map(i => {
        return new htmlPlugin({
            template: `${ENTRY_HTML}/${i}`,
            filename: `${i}`,
            chunks: ['vendors', 'manifest', i.split('.')[0]]
        })
    })

    return templeteArr;
}

//生成一个多入口的对象
function jsEntry() {

    let arr = fs.readdirSync(ENTRY_JS);

    let obj = {}

    arr.reduce((a, b) => {
        let name = b.split('.')[0];
        obj[name] = `${ENTRY_JS}/${b}`;
    }, obj);

    return obj;
}
复制代码

3.用这两个函数替换掉webpack配置的对应固定项

module.exports = {
    entry: jsEntry()
    ...
    plugins: [
    
        ...htmlList(),
        
        new MiniCssPlugin({
            filename: 'css/[name].[hash:8].css',
            chunkFilename: 'css/index.[hash:8].css'
        }),
        
    ]
}
复制代码

以上代码添加完毕后进行测试，在html文件夹下添加一个list.html，在js文件夹下添加list.js，之后运行

npm run build
复制代码

生成的项目目录包含以下几个文件：

done！