模块化思想
- 命名空间 库名.类别名.方法名
- commonjs 一个文件为一个模块，模块内的变量是不能被外界直接访问到的，只能通过module.exports暴露模块接口，外界通过require引入模块，require是同步执行的。commonjs是在nodejs服务端执行的。
var xx=require('./router'); exports=module.exports=createApp; - amd async module definition 使用define定义模块 使用require来引用模块 RequireJs 将所有依赖前置
define( //module name 可以省略 "alpha", //dependence 可能是一个也可为多个 ["require","exports","beta"], //module exports function(require,exports,beta){ exports.verb=function(){ return beta.verb(); return require("beta").verb(); } }); - cmd common module definition 一个文件一个模块 使用define定义模块 使用require来引用模块 seaJS 尽可能懒执行
//所有模块都通过define来定义define(function(require, exports,module){ //通过require引入依赖 var $=require('jquery'); var Spinning=require('./spinning'); //通过exports对外暴露接口 exports.doSomething=... //或者通过 module.exports 提供整个接口 module.exports=...}); 区别
知识点1：AMD/CMD/CommonJs是JS模块化开发的标准，目前对应的实现是RequireJs/SeaJs/nodeJs.知识点2：CommonJs主要针对服务端，AMD/CMD主要针对浏览器端，所以最容易混淆的是AMD/CMD。知识点3 : AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。知识点4：AMD/CMD的优缺点.一个的优点就是另一个的缺点， 可以对照浏览。AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。 AMD缺点：**并行加载，异步处理**，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。 CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。 CMD缺点：执行等待时间会叠加。因为每个文件执行时是**同步执行**（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。
知识点5：如何使用？CommonJs的话，因为nodeJs就是它的实现，所以使用node就行，也不用引入其他包。AMD则是通过<script>标签引入RequireJs，具体语法还是去看官方文档或者百度一下吧。CMD则是引入SeaJs。
- umd universal module definition 通用解决方案 三个步骤：1判断是否支持amd 2判断是否支持commonjs 3如果都不支持则定义为全局变量
(function(root,factory){ //判断define是否是一个函数，是否支持amd if(typeof define ==='function' && define.amd){ define([],factory); //判断是否在nodejs环境中 }else if(typeof exports === 'object'){ module.exports=factory(); }else{//都不符合的话则定义为全局变量 root.returnExports=factory(); }})(this, function(){ return {};})); - es6 module 一个文件为一个模块 export/import
import theDefault,{named1 as mynamed1,named2} from 'src/mylib';//引入export default暴露的接口，引入named1并重命名和named2import * as my lib from 'src/mylib';//讲暴露的接口全部引入，使用lib来之用import 'src/mylib';//只是加载，但没有使用 - webpack支持 AMD(RequireJS) ES Modules(推荐) CommonJS（webpack基于nodeJS）
环境准备+webpack简介
- 命令行工具 node+npm webpack-cli
webpack简介
是一个js小伙伴的打包器，通过代码分割的功能做到按需加载，loaders。
中文官网：https://www.webpackjs.com
-
核心概念
Entry：是代码的入口；打包的入口，直接或间接的找到依赖；单个或多个入口，多个入口原因：1多页面应用程序；2单页面：框架代码/业务代码。 参数可以是一个字符串表示的路径，还可以是数组，对象健值对(推荐)，value值都是一个字符串表示的路径。entry:{ index:['index.js','app.js'], vender:'vender.js'}Output 打包成的文件；一个或多个；自定义规则；配合CDN。
output:{//多个output的自定义配置//name是对应entry中的，index或者vender，hash:5相当于一个版本号 filename:'[name].min.[hash:5].js'}Loaders处理文件,将文件转化为模块。
module:{ rules:[ { test:/\.css$/,//满足这个正则表达式，则use use:'css-loader' } ]}常用loader
编译相关：babel-loader,ts-loader 样式相关：style-loader,css-loader,less-loader,postcss-loader 文件相关：file-loader,url-loaderPlugins参与到整个打包的过程，打包优化和压缩，配置编译时的变量,很灵活。const webpack=require('webpack');module.exports={ plugins:[ new webpack.optimize.UglifyjsPlugin() ]}常用的
优化相关 CommonsChunkPlugin 提取相同代码 UglifyjsWebpackPlugin 功能相关 ExtractTextWebpackPlugin 将css提取出打包成一个单独的css文件 HtmlWebpackPlugin 生成html HotModuleReplacementPlugin 热更新 CopyWebpackPlugin 拷贝文件 - 名词 Chunk 代码块 Bundle 已经被打包好的 Module 文件被转化为module