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的五种用法的更多相关文章

  1. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

  2. webpack解惑:require的五种用法 (转)

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

  3. Android中Button的五种监听事件

    简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...

  4. js正则表达式中的问号几种用法小结

    这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式,感兴趣的朋友可以参考下 在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪 ...

  5. C#this的五种用法

    this的五种用法: 1.使用被掩盖的成员变量: class AA { int a; public void set1(int a) { this.a = a;//right } public voi ...

  6. java中 this 的三种用法

    Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...

  7. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  8. a标签中href=""的几种用法(转)

    a标签中href=""的几种用法   标签: html / a标签 / javascript 46371 众所周知,a标签的最重要功能是实现超链接和锚点.而且,大多数人认为a标签最 ...

  9. javascript中this的四种用法

    javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...

随机推荐

  1. 【高可用HA】Apache (2) —— Mac下安装多个Apache Tomcat实例

    Mac 下安装多个Apache Tomcat实例 tomcat版本:tomcat-8.0.29 参考来源: Installing Tomcat 7.0.x on OS X 在mac系统安装Apache ...

  2. C++实现顺序计算输入表达式的值

    #include <iostream> #include <cstring> #include <cctype>//判断字符类型需要的头文件 using names ...

  3. iOS边练边学--UITableViewCell的常见属性设置

    // 取消选中的样式(常用) 让当前 cell 按下无反应 cell.selectionStyle = UITableViewCellSelectionStyleNone; // 设置选中的背景色,U ...

  4. 【转】使用 Jmeter 做 Web 接口测试

    最近总结了一下在接口测试方面的知识与心得,在这里与大家分享一下,如有说的不对的地方请多多指正. 接口测试概述 定义 API testing is a type of software testing ...

  5. [android] AndroidManifest.xml 详解

    第1部分 标签库+包路径+版本控制 <manifest xmlns:android="http://schemas.android.com/apk/res/android" ...

  6. ElasticSearch0910学习

    1:es简介 es是一个分布式的搜索引擎,使用java开发,底层使用lucene. 特点:天生支持分布式的.为大数据而生的.基于restful接口. 2:es和solr对比 接口 solr:类似web ...

  7. e653. 写入段落文本

    In order to change the font of the text, you need to supply an attributed string to the LineBreakMea ...

  8. e551. 精简的Applet

    Every applet must subclass Applet. import java.applet.*; import java.awt.*; public class BasicApplet ...

  9. Blend for Visual Studio 2013

    软件开发中为了使设计师和程序员“并行”工作并直接参与到程序的开发中来. 1.在网络程序开发团队中,草图设计后,设计师们可以使用HTML.CSS.JavaScript直接生成UI,程序员则在这个UI产生 ...

  10. motion的移植和使用

    说明: motion主页:http://www.lavrsen.dk/foswiki/bin/view/Motion motion下载地址:http://sourceforge.net/project ...