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

} )()
  ;