关于javascript:webpack打包过程

筹备工作

首先咱们先装置 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");

} )()
  ;