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
  • 相关阅读:
    8 pandas模块,多层索引
    7 numpy 傅里叶,提取图片轮廓
    6 DataFrame处理丢失数据--数据清洗
    5 pandas模块,DataFrame类
    4 pandas模块,Series类
    3 numpy模块
    2 线性代数基础
    1 Ipython、Jupyter 入门
    jdk安装与环境变量配置(一劳永逸)
    对jsp可见域的变量感悟
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/12543068.html
Copyright © 2011-2022 走看看