webpack做的就是分析代码
webpack只是一个打包模块的机制,只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖,来打包你的代码。至于你的代码使用的是commonjs还是amd或者es6的import。webpack城市对其进行分析。来获代替码的依赖。webpack做的就是分析代码。转换代码,编译代码,输出代码。webpack自己是一个node的模块,所以webpack.config.js是以commonjs形式书写的(node中的模块化是commonjs规范的)
webpack中每个模块有一个独一的id,是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的内容,并凭据require的挨次摆列。
// webpack.config.js module.exports = { entry:‘./a.js‘, output:{ filename:‘bundle.js‘ } };
// a.js var b = require(‘./b.js‘); console.log(‘a‘); b.b1();
// b.js exports.b1 = function () { console.log(‘b1‘) }; exports.b2 = function () { console.log(‘b2‘) };
以上代码我们打包措置惩罚惩罚的js为
// bundle.js /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { var b = __webpack_require__(1); console.log(‘a‘); b.b1(); /***/ }, /* 1 */ /***/ function(module, exports) { exports.b1 = function () { console.log(‘b1‘) }; exports.b2 = function () { console.log(‘b2‘) }; /***/ } /******/ ]);
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32084.html