分析webpack打包后的代码

在webpack.config.js添加如下配置。

const path = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }

通过基础的webpack配置最后会生成如下所示的打包文件

(function (modules) { var installedModules = {}; function __webpack_require__(moduleId) { if (installedModules[moduleId]) { return installedModules[moduleId].exports; } var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); return module.exports; } // 此处省略部分代码 return __webpack_require__(__webpack_require__.s = "./src/index.js"); }) ({ "./src/a.js": (function (module, exports) { eval("exports.a = 'a模块'\r\n\n\n//# sourceURL=webpack:///./src/a.js?"); }), "./src/index.js": (function (module, exports, __webpack_require__) { eval("const a = __webpack_require__(/*! ./a */ \"./src/a.js\")\r\nconsole.log(a)\r\n\n\n//# sourceURL=webpack:///./src/index.js?"); }) });

通过删减部分代码之后，我们很容易看出代码是通过一个自执行函数处理的

(function (modules) { // 此处省略部分代码 })({})

自执行函数的参数是一个对象，对象的属性名是路径，属性值是函数

{ "./src/a.js": (function (module, exports) { eval("exports.a = 'a模块'\r\n\n\n//# sourceURL=webpack:///./src/a.js?"); }), "./src/index.js": (function (module, exports, __webpack_require__) { eval("const a = __webpack_require__(/*! ./a */ \"./src/a.js\")\r\nconsole.log(a)\r\n\n\n//# sourceURL=webpack:///./src/index.js?"); }) }

我的原始打包文件是这样的依赖关系

src a.js -> exports.a = 'a模块' index.js -> const a = require('./a');console.log(a);

通过原始文件和打包后的文件对比，可以知道__webpack_require__是webpack实现的require方法，用来加载模块，原理和commonJS原理十分类似。因为浏览器是不支持commonJS原理，commonJS原理只能在node环境中用，直接在浏览器却无法运行，所以要webpack自己去实现模块加载。

这里所说的是打包之后的代码是运行在浏览器，打包这个过程是node运行的。

值得注意的是模块的路径打包之后都是相对于当前工作目录的路径，就是相对于运行打包命令的路径。

命令

如果我们要自己实现一个webpack，就必须写一个webpack包，发布的npm官方网站中，才能使用npx webpack命令，可是在本地开发必须得边开发边验证我们自己写的代码是否正确，我们可以通过npm link把包链接到全局，这样就可以不用发布到npm官方网站了，就直接使用npx webpack命令。开发完成再发布即可。

下面是我的webpack，名字叫z-pack包

{ "name": "z-pack", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "z-pack": "./bin/z-pack.js" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

当在CMD中执行命令z-pack将会执行./bin/z-pack.js的文件，bin字段就是npm配置可执行文件的字段，是固定的字段名

#! /usr/bin/env node console.log('hello')

在代码的第一行，必须指定代码的运行环境为node，之后再写JS代码。