手写webpack (3)

时间：2020-03-21 23:43:56 收藏：0 阅读：83

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