准备工作首先我们安装webpack和webpack-cliyarnaddwebpackwebpack-cli//ornpminstallwebpackwebpack-cli安装完成后我们准备两个文件用于测试webpack打包后的代码产品，然后找出来，是什么webpack会把我们写入的代码打包进去。//index.js主文件constexternalModule=require('./lib')console.log('requirestart')console.log(externalModule)console.log('requireend')//test.jsmodule.exports={test:'我是一个参考文件'}我们先在本地运行nodeindex.js，可以看到输入是//requirestart//{test:'我是一个参考文件'}//requireend我们可以看到文件已经正确运行了。说到这里，我们可以看到在test.js文件中，我使用module.exports来导出，因为node是commonjs规范，我们也可以使用exports.default来导出。打包输出然后我们开始打包，为了方便查看，打包的时候选择测试环境。运行npxwebpack--modedevelopment./index.js，打包后输入的文件大致如下：//打包后会生成一个自执行函数(()=>{/***打包后，所有模块聚合成一个集合*使用文件名路径作为键值索引**/var__webpack_modules__=({"./index.js":((__unused_webpack_module,__unused_webpack_exports,__webpack_require__)=>{eval("constexternalModule=__webpack_require__(/*!./test*/\"./test.js\")\r\n\r\nconsole.log('requirestart')\r\nconsole.log(externalModule)\r\n控制台。log('requireend')\n\n//#sourceURL=webpack://a/./index.js?");}),"./test.js":((__unused_webpack_module,exports)=>{eval("//module.exports={\r\n//test:'我是参考文件'\r\n//}\r\n\r\nexports[\"default\"]={\r\ntest:'我是参考文件'\r\n}\n\n//#sourceURL=webpack://a/./test.js?");})});//模块缓存，先调用后悔加入缓存var__webpack_module_cache__={};/***模块调用*@param{*}moduleId模块文件名*/function__webpack_require__(moduleId){//检查模块缓存中是否有需要调用的模块，如果有则直接引用varcachedModule=__webpack_module_cache__[moduleId];if(cachedModule!==undefined){返回cachedModule.exports;}//IfnotThencreateanewmodulereferencevarmodule=__webpack_module_cache__[moduleId]={exports:{}};__webpack_modules__[moduleId](module,module.exports,__webpack_require__);返回module.exports；}//初始化默认调用index.js模块var__webpack_exports__=__webpack_require__("./index.js");})();
