浅谈webpack模块引用的五种方法

1、commonjs格式的require同步语法

const home = require('./Home');
… // 使用

 

2、commonjs格式的require.ensure异步语法

require.ensure([], require => {
  	const home = require('./Home');
  	… //使用
});

Home.js会被打包成一个单独的chunk文件:1.fb874860b35831bc96a8.js,其名称不具有可读性,因此一般给require.ensure传递第三个参数。

require.ensure([], require => {
  	const home = require('./Home');
  	… //使用
}, bundle/home');

Home.js会被打包成一个具有指定文件名称的chunk文件:home.fb874860b35831bc96a8.js,该文件在bundle目录下。

在webpack.config.js文件中配置:

output: {
  	path: __dirname + '/public',
  	filename: '[name].js',
  	chunkFilename: '[name].bundle.js'
}

Home.js会被打包成一个具有指定文件名称的chunk文件:home.bundle.js,该文件在bundle目录下,而bundle目录又在/public目录下。

注意:如果在require.ensure的回调函数中引用了两个以上的模块,webpack会把它们打包在一起。

require.ensure([], require => {
  	const a = require('./a');
  	… //使用
  	const b = require('./b');
  	… //使用
}, bundle/a-b');

a.js和b.js会被打包成一个具有指定文件名称的chunk文件:a-b.bundle.js,,该文件在bundle目录下。如果不希望打包在一起,只能写多个require.ensure分别引用每一个模块。

给require.ensure传递的第一个参数可以是空数组,其实也可以是模块,实现预加载懒执行。

require.ensure(['./Home'], require => {
   	const home = require('./Home');
   	… //使用
}, bundle/home');

Home.js会被下载下来,即所谓的预加载,但不会执行Home.js模块中的代码,当执行到onsthome = require('./Home')一句时才执行,即所谓的懒执行。

 

3、webpack自带的require.include

require.include是webpack自身提供的,它可以实现require.ensure中的预加载功能,而不用把模块写在数组中。

require.ensure([],require => {
  	require.include('./Home');// 只加载不执行
  	… //使用
});

require.include的返回值是undefined,如果想使用模块,需要再通过require引入。

require.ensure([],require => {
  	require.include('./Home');// 只加载不执行
  	const home = require('./Home'); // 执行
  	… //使用
}, bundle/home');

 

4、AMD异步加载

webpack既支持commonjs规范也支持AMD规范。

require(['./Home'], function(home){
  	… //使用
});

如果写了多个模块,那么这些模块都会被打包成一个文件。

require(['./a', './b'], function(a, b){
  	… //使用
});

a.js和b.js会被打包在一起,但AMD的方式无法传入第三个参数来指定文件名称。

require AMD与require.ensure的区别:

1)     require AMD传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数;

2)     require.ensure也是传递一个模块数组和回调函数,但是模块只会被下载下来,不会被执行,只有在回调函数中执行到require(模块)一句时,该模块才会被执行。

在webpack.config.js文件中配置:

module.exports = {
 	entry: 'index.js'
	output: {
        	path: __dirname + '/public',
        	filename: '[name].js',
        	chunkFilename: '[name].bundle.js'
	}
}
eg1:require AMD

index.js:

require(["./a"], function(a) {
   	console.log("a");
    var b = require("./b");
   	console.log("b");
});
a.js:

console.log("1");
module.exports = 1;

b.js:

console.log("2");
module.exports = 2;

输出:

1

a

2

b

 

eg2:require.ensure

index.js:

require.ensure(["./a"], require=> {
    console.log("a");
    var b = require("./b");
   	console.log("b");
    require("./a");
}, 'public/index');

a.js:

console.log("1");
module.exports = 1;

b.js:

console.log("2");
module.exports = 2;

输出:

a

2

b

1

 

eg3:require.ensure

index.js:

require.ensure(["./a"], require=> {
    console.log("a1");
    var b = require("./a");
   	console.log("a2");
}, 'public/index');
require.ensure(["./b"], require=> {
    console.log("b1");
    var b = require("./b");
   	console.log("b2");
}, 'public/index');

a.js:

console.log("1");
module.exports = 1;

b.js:

console.log("2");
module.exports = 2;

输出:

a1

1

a2

b1

2

b2

 

5、ES6的import

import会被转化为commonjs格式或是AMD格式,所以它不是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范,因此不需要再把它转成AMD规范。

import home from './Home';

等价于

const home = require('./Home'); 

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值