码迷,mamicode.com
首页 > Web开发 > 详细

手写webpack (3)

时间:2020-03-21 23:43:56      阅读:83      评论:0      收藏:0      [点我收藏+]

标签: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 = "<%-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

手写webpack (3)

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!