webpack3实战（4）打包带异步加载功能的模块

深藏阁楼爱情的钟 2022-06-03 23:49 227阅读 0赞

### 前注： ###

文档全文请查看 [根目录的文档说明][Link 1]。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请[点击这里][Link 2]，发【Issues】。

[实战项目示例目录][Link 3]

### 1、需求列表 ###

1、有模块A、B两个；

2、A组件默认加载，B组件在符合某种条件下加载（例如延迟1秒后再加载）；

3、显然我需要打包其为2个文件；

### 2、步骤 ###

安装依赖

npm install

执行打包命令：

npm run test

查看打包后效果：

dist/index.html

### 3、说明 ###

首先，第一个简单问题可能会被忽略，那就是打包时需要顺便打包index.html文件，因为B模块打包后的文件的路径`dist/b.js`，是写的相对于A模块的`dist/a.js`，同时会认为html文件和`a.js`、`b.js`两个文件在同一个目录下（除非你特殊设置）

所以html文件必须和打包后的文件处于一个文件夹下，即`dist`文件夹。

其他代码和普通的没什么不同，这里最核心的问题，在于如何让模块B可以打包到另外一个文件，并延迟加载。

核心代码如下：

setTimeout(() => { require(['./bar.js'], function (module) { module.test() }) }, 1000)

1、`setTimeout`没啥可说的，就是让加载模块的代码，延迟执行。但注意，这个不会触发异步，只是模拟实际操作中的延迟操作行为；

2、`setTimeout`里面的代码，是异步加载的核心，无非就是require引入了一个模块，然后参数二是回调函数，回调函数的第一个参数是引入模块导出的值；

3、`export {test}`导出模块支持es6写法，或者CommonJS写法、AMD写法、CMD写法（具体参照【实战4】里面的 `bar.js` 文件）；

4、注意，这个行为是异步的，所以才放在回调函数里，如果你在`require`之后想执行一段在执行完回调函数才执行的代码，一定要注意这一点，不能直接写在`require`函数之后；

5、我们常见框架中异步加载组件的写法，是`let test = resolve => require(['./bar.js'], resolve)`，相当于对以上代码进行 **柯里化** 了。剩下的任务，框架帮我们完成了。

[Link 1]: https://github.com/qq20004604/webpack-study
[Link 2]: https://github.com/qq20004604/webpack-study/issues
[Link 3]: https://github.com/qq20004604/webpack-study/tree/master/%E3%80%90%E5%AE%9E%E6%88%98%EF%BC%94%E3%80%91%E6%89%93%E5%8C%85%E5%B8%A6%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E5%8A%9F%E8%83%BD%E7%9A%84%E6%A8%A1%E5%9D%97

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue笔记：WebPack模块加载器兼打包工具

文章目录 Webpack 安装配置使用webpack Webpack

ゝ一世哀愁。/ 2022年12月10日 14:36/ 0 赞/ 123 阅读

相关 Webpack 模块打包原理

在使用webpack的过程中，你是否好奇webpack打包的代码为什么可以直接在浏览器中跑？为什么webpack可以支持各种ES6最新语法？为什么在webpack中可以书写im

谁借莪１个温暖的怀抱￠/ 2022年10月01日 06:59/ 0 赞/ 234 阅读

相关 webpack3实战（4）打包带异步加载功能的模块

前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请[点击这里][Link 2]，发【

深藏阁楼爱情的钟/ 2022年06月03日 23:49/ 0 赞/ 228 阅读

相关教你怎么使用 webpack3 的 HMR 模块热加载

前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请[点击这里][Link 2]，发【

忘是亡心i/ 2022年06月03日 10:08/ 0 赞/ 222 阅读

相关 Webpack 4.0.0 正式发布，模块加载打包工具

Webpack 4.0.0 正式版已发布，Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应

妖狐艹你老母/ 2022年05月31日 14:08/ 0 赞/ 287 阅读

相关 Ztree异步加载带树节点（带checkbox）

一.简介：实现复选框树型结构，ztree很强大，常用浏览器chrome，firfox支持，IE8+也兼容。二.静态实现方式：（1）效果图： ![Image 1][]

刺骨的言语ヽ痛彻心扉/ 2022年05月29日 07:45/ 0 赞/ 234 阅读

相关 webpack模块打包工具

webpack模块打包工具从上文看webpack很像是JS的翻译器，其实这个定义是不准确的，webpack只认识import这样的语法，很多高级的JS代码并不认识。

比眉伴天荒/ 2022年01月10日 14:23/ 0 赞/ 378 阅读

相关 Webpack模块加载器

![328599-20170418094918681-1031600624.jpg][] 一、介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载

今天药忘吃喽~/ 2021年10月25日 14:40/ 0 赞/ 385 阅读

相关 unity 3d 异步加载场景--异步预加载场景

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] unity版本5.3以上网上很多异步加载场景实际上没

小咪咪/ 2021年09月20日 02:52/ 0 赞/ 447 阅读

相关 webpack4 代码懒加载、预加载

1、新增.eslintrc,解决启用了eslint后import 只能在顶层使用的报错 { "parser": "babel-eslint"

迈不过友情╰/ 2021年07月24日 17:06/ 0 赞/ 641 阅读