这期内容当中小编将会给大家带来有关如何在webpack中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强> commonjs同步语法强>
经典的commonjs同步语法如下:
var a =,要求(& # 39;。/一个# 39;); a.show ();
此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形,不必赘述。
<强>,commonjs异步加载强>
在commonjs中有一个模块/异步/规范,里面定义了。确保语法.webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。用法如下:
require.ensure([],函数(需要){ var 才能;list =,要求(& # 39;。/列表# 39;); list.show才能(); });
此时list.js会被打包成一个单独的块文件,大概长这样:
1. fb874860b35831bc96a8.js
可读性比较差。我在上一篇结尾也提到了,给它命名的方式,那就是给需要。确保传递第三个参数,如:
require.ensure([],函数(需要){ var 才能;list =,要求(& # 39;。/列表# 39;); list.show才能(); },,& # 39;列表# 39;);
这样就能得到你想要的文件名称:
list.fb874860b35831bc96a8.js
你也可以传入像“问题/list"这样带层级的名字,这样webpack会按照层级给你创建文件夹。
需要注意的是,如果你在需要。确保的函数中引用了两个以上的模块,webpack会把它们打包在一起,比如:
require.ensure([],函数(需要){ var 才能;list =,要求(& # 39;。/列表# 39;); list.show才能(); var 才能;edit =,要求(& # 39;。/编辑# 39;); edit.display才能(); },,& # 39;list_and_edit& # 39;);
list.js和edit.js将会被打包成一个文件,并命名为list_and_edit.js。这就需要根据你的实际情况来衡量了,如果你不希望打包在一起,只能写两个require.ensure分别引用这两个文件。
多说一句,这种思维其实我是很不喜欢的,在编码阶段却要对打包的事情做出决策,明显违背了职责分离原则。
<强>,commonjs预加载懒执行强>
在上面的用法中,我们给需要。保证的第一个参数传了空数组,实际上这里是可以接收模块名称的,作用就是实现预加载懒执行。用法如下:
require.ensure((& # 39;。/列表# 39;],,功能(需要){ var 才能;list =,要求(& # 39;。/列表# 39;); list.show才能(); });
给require.ensure的第一个参数传了[& # 39;。/列表# 39;],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行名单。js模块中的代码,也就是webpack官网说的,不会进行评估。真正进行评估的时候是到了后面这句var=需要列表(& # 39;。/列表# 39;);这就是所谓的懒执行。
写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。
这种写法也是有点别扭的,像是commonjs和AMD的结合体,而且一个模块名称还要写两次,真是不够优雅。所以webpack自己定义了一个方法,能够实现预加载。
<强>,webpack自带的require.include 强>
要求。包括是webpack自己提供的,并没有什么规范做后台,所以是个小角色。它可以实现上面是预加载功能,而不用把模块写在数组中,用法如下:
require.ensure([],函数(需要){ require.include才能(& # 39;。/列表# 39;);//此处只加载不执行 });
据webpack官网文档介绍,require.include还有一个作用是能把子模块中的公共部分,提取到父模块中,比如child1和child2都引用了list.js这个模块,那么如果在父类中包括了list.js,那么子模块中的就会被删掉,相当于提升到了父模块中。(这里所谓的父子关系是指引用关系)
这个方法官方也是一笔带过,看来也是一个鸡肋的东西,用处不大,因为我发现要求。包括的返回值是未定义的,也就是说,如果你想使用模块,姿势是这样的:
require.ensure([],函数(需要){ require.include才能(& # 39;。/预览# 39;);,//加载 let 才能;p =,要求(& # 39;。/预览# 39;);,//执行 p.getUrl才能();,//使用 },,& # 39;前# 39;);
<强> AMD异步加载强>
webpack既支持commonjs规范也支持AMD规范,这就意味着AMD的经典语法是可以正常使用的,如: