关于javascript:webpack打包过程

筹备工作

首先咱们先装置webpack 以及 webpack-cli

yarn add webpack webpack-cli // ornpm 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" );} )()  ;