I'm beginner of javascript, I find some below code which cannot understand the work flow can any one help me inside:

(() => {
    var e = {
        900: (e, t, n) => {
            const r = n(300),
            o = n(700);
            e.exports = function (e) {
                const t = document.getElementById(e.target.dataset.id),
                x = document.getElementById(e.target.dataset.name),
                d = document.importNode(x, !0),
                o(e),
                s = r(d,{});
                t.appendChild(s.content)
            }
        },
        300: e => {
            e.exports = function (e, t) {
                return Object.keys(t).forEach((function (n) {
                        e.innerHTML = e.innerHTML.replace(new RegExp(`{{${n}}}`, "g"), t[n])
                    })),
                e
            }
        },
        500: e => {
            e.exports = function (e) {
                e.target.parentNode.parentNode.remove()
            }
        },
        700: e => {
            e.exports = function (e) {
                const t = document.getElementById(e.target.dataset.id),
                t.dataset.counter = parseInt(t.dataset.counter) + 1
            }
        }
    },
    t = {};
    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            exports: {}
        };
        return e[r](o, o.exports, n),
        o.exports
    }
    (() => {
        const e = n(900),
        t = n(500);
        function r(n) {
            "add" === n.target.dataset.type ? e(n) : "remove" === n.target.dataset.type && t(n)
        }
        
    })()
})();

Base on above example, what's the mean of (()=> {}) and (() => {})() and why the end will add () , also what's the e.exports use for ? Thank you