筹备工作
首先咱们先装置 webpack 以及 webpack-cli
yarn add webpack webpack-cli
// or
npm install webpack webpack-cli 装置完后咱们筹备了两个文件用于测试 webpack 打包后的代码产物，而后一探到底，webpack 会把咱们所写的代码打包成什么样了呢。
// index.js 主文件
const externalModule = require('./lib')
console.log('require start')
console.log(externalModule)
console.log('require end')// test.js
module.exports = {test:'我是一个我是一个援用文件'}咱们先本地运行下 node index.js 能够看到输出为
// require start
// {test: '我是一个援用文件'}
// require end咱们能够看到文件曾经正确运行，说到这里，咱们能够看出 test.js 文件里我用的是 module.exports 导出，是因为 node 是 commonjs 标准，咱们也能够应用 exports.default 导出。
打包输入
接着咱们开始打包，为了不便查看，打包的时候抉择测试环境。
运行 npx webpack –mode development ./index.js，打包后文件输出大抵如下：
// 打包后将生成一个自执行函数
(() => {
/**
* 打包后所有的模块聚合成一个汇合
* 用过文件名门路作为键值索引取用
* */
var __webpack_modules__ = ( {
"./index.js":
(( __unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {eval( "const externalModule = __webpack_require__( /*! ./test */ \"./test.js\")\r\n\r\nconsole.log('require start')\r\nconsole.log(externalModule)\r\nconsole.log('require end')\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\n test:' 我是一个援用文件 '\r\n}\n\n//# sourceURL=webpack://a/./test.js?" );
} )
} );
// 模块缓存，第一次调用悔恨退出缓存
var __webpack_module_cache__ = {};
/**
* 模块调用
* @param {*} moduleId 模块文件名
*/
function __webpack_require__ (moduleId) {
// 查看模块缓存里是否存在须要调用的模块，如若有则间接援用
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {return cachedModule.exports;}
// 如若没有则创立一个新的模块援用
var module = __webpack_module_cache__[moduleId] = {exports: {}
};
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
return module.exports;
}
// 初始化默认调用 index.js 模块
var __webpack_exports__ = __webpack_require__("./index.js");
} )()
;