一、Promise
1、Promise简介
因为javascript是单线程的,所以很多的事情只能够使用异步的方式去做好,而异步又会出现执行先后顺序,过去使用的是回调的方式来解决这样的问题。到了ES6,官方把Promise制定了标准。
2、Promise的接口列表:
then 、catch、resolve、reject、all、race
在Promise调用的function中如果处理的结果为正常,则调用resolve函数,如果异常,则调用reject函数。
在function中调用resolve方法时,程序中就会调用then函数,如果调用reject方法时,就会调用catch函数。
参数传递方面需要保持一致就可以了,就像我们注册一个普通的函数一样。
Promise.all会接收一个promise对象数组,等待数组中的promise函数全部执行完成后,才会执行all的.then或者.catch方法。
Promise.race会接收一个promise对象数组,只要数组中有一个promise函数执行完成后,就会执行race的.then或者.catch方法。
二、webpack
1、入口
webpack将创建所有应用程序的依赖关系图表。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始,并遵循着依赖关系图表知道要打包什么。可以将应用程序的入口起点认为是根上下文或 app 第一个启动文件。
类比于requirejs中的入口文件main.js,最终使用r.js打包时,都打包在main.js里。
在webpack中,使用webpack配置对象中的entry属性来定义入口,包括以下多种方式。
【单个入口(简写)语法】
用法:entry: string|Array<string>
[注意]在设置entry属性时,如果是当前页面,一定要在属性值前面设置为'./',否则无法识别
var config = {
entry: './path/to/my/entry/file.js'
};
2、出口
在webpack中配置output属性,需要将它的值设置为一个对象,并包含filename和path属性这两个必选项
filename:编译文件的文件名,首选推荐:main.js||bundle.js||index.js
path:对应一个绝对路径,此路径是希望一次性打包的目录
//webpack.config.js
var config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
3、加载器
webpack的目标是,让webpack聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些。webpack把每个文件(.css,.html,.scss,.jpg,etc.)都作为模块处理。然而webpack只理解JavaScript。webpack loader会将这些文件转换为模块,而转换后的文件会被添加到依赖图表中
loader可以使你在require()或"加载"模块时预处理文件。因此,loader类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法
webpack的配置要能识别出(identify)应该被对应的loader进行转换(transform)的那些文件。由于进行过文件转换,所以能够将被转换的文件添加到依赖图表(并且最终添加到bundle中)(use属性)
常见的加载器loader包括以下三类:
1)、编译相关:babel-loader、ts-loader
2)、样式相关:style-loader、css-loader、less-loader、postcss-loader
3)、文件相关:file-loader、url-loader
4、插件
插件plugin是wepback的支柱功能。在使用webpack配置时,webpack自身也构建于同样的插件系统上。插件目的在于解决loader无法实现的其他事情。由于loader仅在每个文件的基础上执行转换,而插件(plugins)最常用于(但不限于)在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能,包括打包优化压缩及配置编译时的变量等功能。webpack的插件系统极其强大和可定制化。