手写webpack原理

深碍√TFBOYSˉ_ 2022-09-04 07:47 144阅读 0赞

## 手写webpack原理 ##

#### 使用eval 去执行这个字符串 ####

#### 接使用eval 会造成 全局变量污染，解决办法：使用闭包 (自执行函数) ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            // 2.1.直接使用eval 会造成 全局变量污染
            // 2.2.解决办法：使用闭包 (自执行函数)
            var exports = { };
            // 模拟exports对象
            // eval new function
            // 把导出变成字符串
            // 'exports.default = function (a, b) { return a + b }';
            // 使用eval 去执行这个字符串
            (function (exports, code) { 
                eval(code)
            })(exports, 'var a = 123;exports.default = function (a, b) { return a + b }')
            console.log(exports.default(2, 4));
            console.log('a', a); // a is not defined
            // `var add = require('./add').default; console.log(add(1, 2));`
        </script>
    </body>
    </html>

#### 手写 require方法 ####

#### 导入多个模块 ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            (function (list) { 
                function require(file) { 
                    var exports = { };
                    (function (exports, code) { 
                        eval(code)
                    })(exports, list[file]);
                    return exports
                }
                // 入口
                require('index.js')
            })({ 
                "index.js": ` var add = require('add.js').default; console.log(add(1, 5));`,
                "add.js": "var a = 123;exports.default = function (a, b){return a + b}"
            });
            /* 由index.js入口执行require()函数，第一次file为'index.js'，value值 `var add = require('add.js').default;console.log(add(1, 5));` 执行value的时候用eval又执行了导入add.js，第二次file为'add.js'，value值为 "var a = 123;exports.default = function (a, b){return a + b}" */
            /* 1.收集依赖 谁影响谁 2.ES6转ES5 3.替换require与exports */
        </script>
    </body>
    
    </html>

### 合集 ###

webpack手写打包

> 1.进入目录先安装 package.json : npm install  
> 2.node ./webpack.js 执行  
> 3.打包后 得到一个文件 dist/bundle.js

##### 目录： #####

##### index.html #####

##### webpack.js #####

##### src/add.js #####

export default (a, b) => a + b

##### src/index.js #####

import add from './add.js';
    console.log('酱紫', add(2, 3));