历史介绍
* 2009年，commonjs规范还未出来，此时前端开发人员编写的代码都是非模块化的，
- 那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题
* 与此同时 nodejs开启了js全栈大门，而requirejs在国外也带动着前端逐步实现模块化
- 同时国内seajs也进行了大力推广
- AMD 异步模块定义 requirejs
- CMD common module define seajs和nodejs非常相似
+ commonjs包含模块定义，和CMD比较相似
* npm集中包管理的方式备受青睐，12年bower、browserify诞生
- 此时爆发大量前端工具 webpack也在其中，其是一款模块打包工具、systemjs跟angular抱大腿，angular4用了
webpack优点
* 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
* 模块规范支持全面，amd/cmd以及shimming等一应具全
* 浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
* 插件机制完善，实现同样模块化，容易扩展
webpack基本操作
* 下载安装
- `npm i -g webpack`
* 运行方式通过指定命令
- webpack 入口文件 目标文件
- `webpack ./main.js ./build.js`
* 通过配置文件，以代码的形式来指定webpack运行的相关设置
使用webpack打包解决文件依赖关系
* 根据相关的关键词，比如require/module.exports分析文件依赖，
* 用函数包裹其代码，进行文件合并
使用webpack配置文件
* 进入到当前有webpack.config.js 文件的目录下，运行命令行webpack
module.exports = {
entry:{
main:'./main.js',//默认入口
},
output:{
filename:'./build.js' //出口文件
}
}
引入css问题
* style-loader!css-loader
* `npm i style-loader css-loader -D`
配置文件根级别的属性
配置文件根级别的属性
module:{
loaders:[{
test:/.css$/,
loader:'style-loader!css-loader'
}]
}
autoprefixer自动补充css前缀
* 测试 transform: translate(0px);
* 安装 `npm i autoprefixer-loader -D`
less的使用
* 依赖less `npm i less -D`
* less-loader
* 配置的时候检查一下包是否存在，如果报错需要合适的loader
- webpack.config.js文件中没有配置、对应的包不存在
* 要区分文件的类型
test:/.less$/,
loader:'style-loader!css-loader!autoprefix-loader!less-loader'
处理图片
* url-loader 内部依赖于file-loader
* file-loader 不需要显示的声明出来
* test:/.jpg$/,
* loader:'url-loader?limit=4096'
* 4kb以下的文件才生成base64，否则作为文件输出
base64编码
* 由A-Za-Z0-9+/ 组成，以==结尾
* 通过js将图片的请求减少
* 原来的图片会根据编译的情况增大，一般来讲增加图片的3分之1大小
* base64编码图片，针对图片不要过大
处理字体图标
* 多家一个ttf对于url-loader
生成html文件插件
* 移动html的操作
* 安装包
- `npm i html-webpack-plugin -D`
web-dev-server
* 安装包
- `npm i webpack-dev-server -D`
- `webpack-dev-server --inline --hot --open --port 9999`
+ inline : 自动刷新
+ hot : 热替换和热加载
+ open : 自动打开浏览器
+ port指定端口
- 热替换和热更新可以使用，有效果
+ 注意: __项目运行的文件夹及上级文件夹不要包含特殊字符__
+ () {}
es6
webpack-ES6的处理{
test: /.js$/,
loader: 'babel-loader', //babel-loader -> babel-core
exclude: /node_modules/, //正则表达式
options: {
//解析关键字 下载 babel-preset-es2015
presets: ['es2015'],
//下载babel-plugin-transform-runtime
plugins: ['transform-runtime'],
}
}
ES6中的模块
* 默认导出
- export default xxx;
- import bbb from './xx.js' //不区分名称
* 按需导出
- 声明式 `export var xxx = 1;`
- 引用式 `export {num2 }`
- import {xxx,num2} from './xxx.js'
* 'import' and 'export' may only appear at the top level
* import * as xxx from './xx.js' 全部都引入
- 全部: 一个对象中 默认导出是default属性
+ 按需导出是根据名称来做属性
ES6中的代码变化
var cal = {add:function(n1,n2){
return n1 + n2;
}
}
ES6简写
var cal = {
add(n1,n2){ 绝对不是调用函数，声明函数
return n1 + n2;
}
}
-----------------------------------------
var age = 18;
key是age,值是age变量的值，可以简写
var person = {
age
}