webpack学习笔记—entry

最近在系统学习webpack，记录一些小芝士点~
入口起点（entry points）
entry:String|Array<String>|Object
1.单个入口

module.exports = {
    entry: './src/index.js'
    
    // 指定打包输出文件名
    // entry: {
    //     index: './src/index.js'
    // }
};

webpack官网释义：当你向entry传入一个数组时会发生什么？向entry属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

2.多个入口

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    }
};

如上配置，打包出的文件有多个入口，适合多页面应用打包。

但是这样配置，有一个问题：之后新增一个页面，就要修改entry，能不能写个方法自动读取呢？

const path = require('path');
const glob = require('glob');

const setMPA = () => {
    const entry = {};

    // 入口文件路径
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index];
        const match = entryFile.match(/src\/(.*)\/index\.js/);
        const pageName = match && match[1];
        entry[pageName] = entryFile;
    });
    return {
        entry
    };
};

// 引入entry
const {entry} = setMPA();

module.exports = {
    entry: entry
};

好了，以上就是entry的一些小记录了~具体可移步Demo