手写webpack (3)

2021-04-03 08:24

阅读:436

标签:source   tput   输出   打开   join   code   笔记   通过   dev   

编写  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 = "");
})
/* 自执行函数 传入参数 */
({

"":
(function(module, exports, __webpack_require__) {
eval(``);
}),

       });
 

  

  • 通过 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
代码:   https://gitee.com/guangzhou110/handwritten_webback

手写webpack (3)

标签:source   tput   输出   打开   join   code   笔记   通过   dev   

原文地址:https://www.cnblogs.com/guangzhou11/p/12543068.html


评论


亲,登录后才可以留言!