init: repo

.gitignore

@@ -0,0 +1,50 @@
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# =========================
+# Operating System Files
+# =========================
+
+# OSX
+# =========================
+
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+node_modules
+happy-file
+docs/.vuepress/dist

README.md

@@ -0,0 +1,15 @@
+# tiny-webpack
+
+## Install
+
+```bash
+npm install
+npm install -D typescript
+npm install -D ts-node
+```
+
+## Get Start
+
+```bash
+npm run build
+```

bundle.js

@@ -0,0 +1,48 @@
+(function(modules) {
+  // webpackBootstrap
+  // The module cache
+  var installedModules = {};
+
+  // The require function
+  function require(moduleId) {
+    // Check if module is in cache
+    if (installedModules[moduleId]) {
+      return installedModules[moduleId].exports;
+    }
+    // Create a new module (and put it into the cache)
+    var module = (installedModules[moduleId] = {
+      i: moduleId,
+      l: false,
+      exports: {},
+    });
+
+    // Execute the module function
+    modules[moduleId].call(module.exports, module, module.exports, require);
+
+    // Flag the module as loaded
+    module.l = true;
+
+    // Return the exports of the module
+    return module.exports;
+  }
+  require("./example/index.js");
+})({
+  "./example/index.js": function(module, exports, require) {
+    const a = require("./a.js");
+    const b = require("./b.js");
+
+    console.log(a());
+    b();
+  },
+  "./a.js": function(module, exports, require) {
+    module.exports = function() {
+      console.log("a");
+      return "aaaaa";
+    };
+  },
+  "./b.js": function(module, exports, require) {
+    module.exports = function() {
+      console.log("b");
+    };
+  },
+});

bundler.ts

@@ -0,0 +1,85 @@
+import * as fs from 'fs';
+import * as path from 'path';
+const REQUIRE_REG_GLOBAL = /require\(("|')(.+)("|')\)/g;
+const REQUIRE_REG_SINGLE = /require\(("|')(.+)("|')\)/;
+
+interface GraphStruct {
+    context: string;
+    moduleId: string;
+}
+
+class TinyWebpack {
+    private entryPath: string
+    private graph: GraphStruct[]
+    constructor(entryPath: string) {
+        this.entryPath = entryPath;
+        this.graph = [];
+        this.init();
+    }
+    init() {
+        this.createGraph(this.entryPath, this.entryPath);
+        fs.writeFileSync('bundle.js', this.bundle(this.graph))
+    }
+    createGraph(rootPath: string, relativePath: string) {
+        const context = fs.readFileSync(rootPath, 'utf-8');
+        const childrens = context.match(REQUIRE_REG_GLOBAL);
+        this.graph.push({
+            context,
+            moduleId: relativePath,
+        })
+        const dirname = path.dirname(rootPath);
+        if (childrens) {
+            childrens.forEach(child => {
+                const childPath = child.match(REQUIRE_REG_SINGLE)[2];
+                this.createGraph(path.join(dirname, childPath), childPath);
+            });
+        }
+    }
+    bundle(graph: GraphStruct[]) {
+        let modules = '';
+        graph.forEach(module => {
+            modules += `"${module.moduleId}":function (module, exports, require){
+            ${module.context}
+            },`;
+        });
+        const bundleOutput = `
+        (function(modules) {
+            // webpackBootstrap
+            // The module cache
+            var installedModules = {};
+        
+            // The require function
+            function require(moduleId) {
+                // Check if module is in cache
+                if (installedModules[moduleId]) {
+                    return installedModules[moduleId].exports;
+                }
+                // Create a new module (and put it into the cache)
+                var module = (installedModules[moduleId] = {
+                    i: moduleId,
+                    l: false,
+                    exports: {},
+                });
+            
+                // Execute the module function
+                modules[moduleId].call(
+                    module.exports,
+                    module,
+                    module.exports,
+                    require
+                );
+            
+                // Flag the module as loaded
+                module.l = true;
+            
+                // Return the exports of the module
+                return module.exports;
+            }
+            require("${graph[0].moduleId}");
+        })({${modules}})
+        `;
+        return bundleOutput;
+    }
+}
+
+new TinyWebpack('./example/index.js');

example/a.js

@@ -0,0 +1,4 @@
+module.exports = function () {
+    console.log('a');
+    return 'aaaaa';
+}

example/b.js

@@ -0,0 +1,3 @@
+module.exports = function () {
+    console.log('b');
+}

example/index.js

@@ -0,0 +1,5 @@
+const a = require('./a.js');
+const b = require('./b.js');
+
+console.log(a());
+b();

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>webpack</title>
+</head>
+<body>
+    <script src="./bundle.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "tiny-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "ts-node bundler.ts"
+  },
+  "keywords": [],
+  "author": "hua1995116 <[email protected]> (https://github.com/hua1995116)",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^14.0.14"
+  }
+}