手写webpack

Posted 2020-11-26 1点

编写  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

代码：   https://gitee.com/guangzhou110/handwritten_webback