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