携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
关键的步骤在于bundle.js从CachedSource变更为RawSource的过程，如下，在 node_modules/webpack/lib/Compilation.js/Compilation下：
要明确这个fn是什么呢？这里可能会有点迷惑，在 const p=fn(assets)中的fn就是 冒号前面的fn。
单步调试进入后，它跳转到了terser-webpack-plugin中，进行了optimize。terser-webpack-plugin是什么？
（图片来自：www.npmjs.com/package/ter…）
这个插件用于最小化，也就是我们平时所说的压缩最终生成的javascript内容。
在如下这一步骤经过后，CachedSource变成了RawSource，如果在上面的fn调用之前可以看到对应的assets的类型还是{bundle.js:CachedRource} 而在fn调用后经过terser-webpack-plugin编译后，CachedSource就变换成了RawSource 如下：
在写入数据流之前编译的源码位置如下：
在这一步中还可以看到它是压缩之前的样子，有 反斜杠 t 的制表符，有反斜杠n的换行符。
当它经过 terser-webpack-plugin 下的 getWorker转换后，就会生成对应最终生成的压缩内容，如下：
'(()=>{var e={329:e=>{e.exports=function(e){window.document.getElementById("app").innerHTML=e}},313:(e,t,r)=>{"use strict";r.d(t,{Z:()=>s});var n=r(81),o=r.n(n),a=r(645),i=r.n(a)()(o());i.push([e.id,"#app{color:red;}",""]);const s=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".…n,exports:{}};return e[n](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0,r(181),r(329)("问问计算机：webpack是怎么回事？")})();'
可以直接运行npm run build 命令去验证当前内容是否和输出到dist文件夹下的bundle.js文件的内容完全一致。
下一篇要描述的问题是：这个webpackBootstrap这些内容是在哪儿生成的？
