这次给大家带来Webpack加载模块有哪些方法，Webpack加载模块的注意事项有哪些，下面就是实战案例，一起来看一下。
两个简单的源文件
为了方便分析 webpack 加载模块的原理，我们准备了两个文件：
hello.js
const hello = { say: arg => { console.info('hello ' + arg || 'world'); }};export default hello;
登录后复制
index.js
import Hello from './hello';Hello.say('man');
登录后复制
index.js 作为入口文件，引用了 hello.js 模块。
Webpack 打包
在命令行执行 webpack index.js bundle.js 对入口文件进行打包，生成 bundle.js ，大体结构为（为了方便阅读，我删除了部分多余的代码）：
可以看到，最终生成的文件以 (function (modules) {})([模块1, 模块2]) 的方式启动，我们定义的模块被包装成一个个匿名函数，然后以数组的形式传递个一个匿名函数 function (modules) {}，在这个匿名函数中定义了一个 webpack_require() 函数，用来加载模块，最后，通过 return webpack_require(webpack_require.s = 0); 来加载第一个模块 index.js
webpack_require() 函数
该函数接收一个 moduleId 作为参数，这个参数就是各个模块在数组中的索引，
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] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, webpack_require); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ }
登录后复制
其中 installedModules 是用来缓存执行过的模块。通过 modules[moduleId].call() 来执行模块，最后返回模块的 exports。
模块接受的参数
以 hello.js 模块为例
(function (module, webpack_exports, webpack_require) { "use strict"; const hello = { say: arg => { console.info('hello ' + arg || 'world'); } }; /* harmony default export */ webpack_exports["a"] = (hello); /***/ })
登录后复制
webpack 会向模块传递 module, webpack_exports, webpack_require 三个参数，前两个是用来导出模块内的变量，第三个参数为前面介绍的 webpack_require() 的引用，用来导入其它
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
node.js部署启动后台运行forever步奏详解
正则表达式中的B和使用步骤详解
以上就是Webpack加载模块有哪些方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2757547.html
