Day13 – Closure application 6 – Builder packaging webpack

The basic concept

See the full handwritten Webpack principle

You can watch it after three clicks

🔥 📺 Handwritten Webpack

I did animation all night and let everyone understand Webpack in 10 minutes

How to implement module packaging

A module a. s

// a.js
const time = Date.now()
module.exports = 'A:' + time
Copy the code

Entrance to the index. Js

// index.js
const a = require("./a");
console.log(a);
Copy the code

Run webPack packaging

npx webpack
Copy the code

• Global use of self-running functions – any variable does not pollute the global
• The variable O is a set of modules

Const r = date.now (); var o = {const r = date.now (); o.exports = "A:" + r; }},Copy the code

• Function t is an exports, require analog function

  r = {}; Var n = r[e]; // exports object function t(e) {var n = r[e]; if (void 0 ! == n) return n.exports; var s = (r[e] = { exports: {} }); return o[e](s, s.exports, t), s.exports; }Copy the code

• The entry is a closure formed by self-executing functions referencing o and T variables

  (() => { const o = t(85); console.log(o); }) ();Copy the code

• Since function t is variable promoted, require can also be called in submodules – you can experiment with this for yourself.

The interview guide

• There is no

review

• Closures are everywhere, but naming classic applications is a challenge. Saying Helloworld is no different from reciting.

365 days of clocking

🔥 creation is not easy, we help uncle B stack of a key three

• How to use closures to complete library encapsulation 📺 Billbill video 📚 Gold Digging Manuscript 🐱 Github
• [Talk about closures and real-time functions] 📺 Billbill video 📚 Nugget manuscript 🐱 Github
• 📺 Billbill video 📚 Digger manuscript 🐱 Github
• The relationship between closures and curated, partial application functions 📺 Billbill video 📚 Denver Manuscript 🐱 Github
• How to make lazy functions with closures? 📺 Billbill video 📚 Nuggets Script 🐱 Github
• What is a closure and how to create one? 📺 Billbill video 📚 Nuggets Manuscript 🐱 Github
• [new a constructor if the function returnsreturn {} 、 return null ， return 1 ， return trueWhat happens? ]📺 Billbill video📚 Gold digging manuscript🐱 making
• What happens to a new function? 📺 Billbill video 📚 Nuggets Script 🐱 Github
• What are the ways to determine data types? 📺 Billbill video 📚 Nuggets Script 🐱 Github
• [How much storage space does Number() have? What if the background sends a Number that exceeds the maximum limit?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
• [0.1 + 0.2 === 0.3? Why? How to solve?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
• How are JS integers represented? 📺 Billbill video 📚 Nuggets Transcript [🐱 Github](