浅谈webpack模块引用的五种方法
来源:互联网 发布:java读取配置文件路径 编辑:程序博客网 时间:2024/06/07 03:09
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');
- 浅谈webpack模块引用的五种方法
- webpack解惑:require的五种用法
- 浅谈前端模块开发的方法
- 浅谈前端模块开发的方法
- 浅谈vue+webpack项目调试方法
- maven项目低模块如何引用高模块的方法
- webpack浅谈
- webpack 模块
- webpack构建React应用五:使用webpack Loaders 模块加载器(三)
- webpack打包单页面引用的js
- 浅谈SpringMVC后端与前端Ajax的五种交互方法
- 浅谈javascript的五种基本数据类型
- 模块打包工具webpack的使用
- Python中模块之间变量引用的方法说明
- Python中模块之间变量引用的方法说明
- 安卓引用非项目路径下模块的方法
- 爬爬爬之路:UI(五) 全局引用 解耦的两种方法 手势识别器
- nodejs的模块引用
- 串口通信类库
- iOS NSURLSession 与 NSURLConnection 区别
- windows/linux 环境下 FTP 上传 图片
- Flutter进阶—实现动画效果(五)
- 弹框 有确定和取消的弹窗
- 浅谈webpack模块引用的五种方法
- 联想PC陷入困境 4月份笔电跌至全球第三
- ROS 文件系统工具
- JavaScript概述
- Vim Syntastic Cpplint 配置
- Java 线程同步
- C# list介绍
- Big-man的Bootstrap篇(二)
- 机试复习,更新中……