zoukankan      html  css  js  c++  java
  • 手写webpack (3)

    编写  emitFile 方法
      emitFile() {
        // 打包输出的路径
        let main = path.join(this.config.output.path, this.config.output.filename)
        console.log(main, 'test')
        this.assets = {}
        //
        let templateStr = this.getSource(path.join(__dirname, 'main.ejs'));
        let code = ejs.render(templateStr, { entryId: this.entryId, modules: this.modules })
        //路径对应的代码
        this.assets[main] = code;
        fs.writeFileSync(main, this.assets[main])
      }
    • 将 输出路径与输出名字拼接在一起    打包输出的路径
    • 声明一个对象
    • 创建main.ejs
               先 运行命令:npm i ejs -D 再在bin 下 创建  main.ejs
              
      
    (function(modules) {
    var installedModules = {};
    function __webpack_require__(moduleId) {
    if(installedModules[moduleId]) {
    return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
    i: moduleId,
    l: false,
    exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    module.l = true;
    return module.exports;
    }
    return __webpack_require__(__webpack_require__.s = "<%-entryId%>");
    })
    /* 自执行函数 传入参数 */
    ({
    <%for(let key in modules){%>
    "<%-key%>":
    (function(module, exports, __webpack_require__) {
    eval(`<%-modules[key]%>`);
    }),
    <%}%>
           });
     
    

      

    • 通过 ejs.render 方法  生成最后的打包文件
    • fs.readFileSync()写入bundle.js文件到输出路径。
    在vocode 打开 webpack-dev 下的dist / bundle.js 执行 run  code  
    输出:
    您好a2020
    证明我们的简易版本的手写webpack 成功了
     
     
    笔记  : https://app.yinxiang.com/fx/83b8b85b-c3c9-4bc2-8881-da5dc3f99947
  • 相关阅读:
    如何让实现整站变灰色调 (一般用于悼念活动)
    .net 泛型集合排序,查找
    Windows 2003服务器远程桌面配置
    .net 读取文件数据
    .net 验证工具类
    MS-SQL 基本语法大全
    SQL NVARCHAR和VARCHAR限制
    SQL SERVER DATETIME应用
    SQL事务在存储过程的应用
    移除button点击时的黑边
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/12543068.html
Copyright © 2011-2022 走看看