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

前注：

文档全文请查看 根目录的文档说明。

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

有疑义请点击这里，发【Issues】。

实战项目示例目录

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)，相当于对以上代码进行 柯里化 了。剩下的任务，框架帮我们完成了。