关于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" );

} )()
  ;