webpack中,require的五种用法
a.js:
module.exports = function(x){
console.log(x);
}
一,commonjs同步:
var b = require('./a');
b('你好')
//你好
二,commonjs异步加载:
根据 require.ensure([预加载模块项],fn,文件名称) 语法,webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码:
require.ensure(['./a'],function(require){
var a = require('./a');
a('hello')
},'b')
dist打包下js中的文件名称就是b.js
三,webpack自带的require.include
它可以实现上面是预加载功能,而不用把模块写在数组中;
require.include还有一个作用是能把子模块中的公共部分,提取到父模块中;
require.ensure([],function(require){
require.include('./a') ;//此处只加载,不执行;
let b = require('./a'); //执行
b('你好');
},'b');
四,AMD异步加载
webpack既支持commonjs规范也支持AMD规范,这就意味着AMD的经典语法是可以正常使用的,如:
require(['./a'],function(a){
a('你好');
});
当然,这样写的话list.js也是被单独打包成一个文件的。与上面类似,如果你在这里写了多个模块,那么这些模块都会被打包成一个文件,如:
require(['./a','./b'],function(a,b){
a.show();
b.hide();
})
a.js和b.js会被打包在一起。不同的是,AMD的方式无法传入第三个参数当文件名,所以得不到很好看的文件
五,ES6 import
import会被转化为commonjs格式或者是AMD格式,所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的,你也不用费劲再把它转成AMD了。
import a from './a';
//等价于
var list = require('./list');
不过这两种写法只需选一种,避免在代码中同时使用两种,否则会造成混淆。
总结:
//可打包在一起的同步代码,使用import语法
import list from './a'; //需要独立打包、异步加载的代码,使用require.ensure
require.ensure(['./a'], function(require){
var a = require('./a');
});
参考地址:
http://www.cnblogs.com/laneyfu/p/6262321.html
webpack中,require的五种用法的更多相关文章
- webpack解惑:require的五种用法
我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...
- webpack解惑:require的五种用法 (转)
我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...
- Android中Button的五种监听事件
简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...
- js正则表达式中的问号几种用法小结
这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式,感兴趣的朋友可以参考下 在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪 ...
- C#this的五种用法
this的五种用法: 1.使用被掩盖的成员变量: class AA { int a; public void set1(int a) { this.a = a;//right } public voi ...
- java中 this 的三种用法
Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- a标签中href=""的几种用法(转)
a标签中href=""的几种用法 标签: html / a标签 / javascript 46371 众所周知,a标签的最重要功能是实现超链接和锚点.而且,大多数人认为a标签最 ...
- javascript中this的四种用法
javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...
随机推荐
- 【高可用HA】Apache (2) —— Mac下安装多个Apache Tomcat实例
Mac 下安装多个Apache Tomcat实例 tomcat版本:tomcat-8.0.29 参考来源: Installing Tomcat 7.0.x on OS X 在mac系统安装Apache ...
- C++实现顺序计算输入表达式的值
#include <iostream> #include <cstring> #include <cctype>//判断字符类型需要的头文件 using names ...
- iOS边练边学--UITableViewCell的常见属性设置
// 取消选中的样式(常用) 让当前 cell 按下无反应 cell.selectionStyle = UITableViewCellSelectionStyleNone; // 设置选中的背景色,U ...
- 【转】使用 Jmeter 做 Web 接口测试
最近总结了一下在接口测试方面的知识与心得,在这里与大家分享一下,如有说的不对的地方请多多指正. 接口测试概述 定义 API testing is a type of software testing ...
- [android] AndroidManifest.xml 详解
第1部分 标签库+包路径+版本控制 <manifest xmlns:android="http://schemas.android.com/apk/res/android" ...
- ElasticSearch0910学习
1:es简介 es是一个分布式的搜索引擎,使用java开发,底层使用lucene. 特点:天生支持分布式的.为大数据而生的.基于restful接口. 2:es和solr对比 接口 solr:类似web ...
- e653. 写入段落文本
In order to change the font of the text, you need to supply an attributed string to the LineBreakMea ...
- e551. 精简的Applet
Every applet must subclass Applet. import java.applet.*; import java.awt.*; public class BasicApplet ...
- Blend for Visual Studio 2013
软件开发中为了使设计师和程序员“并行”工作并直接参与到程序的开发中来. 1.在网络程序开发团队中,草图设计后,设计师们可以使用HTML.CSS.JavaScript直接生成UI,程序员则在这个UI产生 ...
- motion的移植和使用
说明: motion主页:http://www.lavrsen.dk/foswiki/bin/view/Motion motion下载地址:http://sourceforge.net/project ...