webpack学习笔记
整理学习资料, 就发上来了
webpack启程---
历史介绍
2009年，commonjs规范还未出来，此时前端开发人员编写的代码都是非模块化的，那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题, 与此同时 nodejs开启了js全栈大门，而requirejs在国外也带动着前端逐步实现模块化, 同时国内seajs也进行了大力推广
AMD 异步模块定义 requirejs
CMD common module define seajs和nodejs非常相似
commonjs包含模块定义，和CMD比较相似
npm集中包管理的方式备受青睐，12年bower、browserify诞生
此时爆发大量前端工具 webpack也在其中，其是一款模块打包工具、systemjs跟angular抱大腿，angular4用了systemjs
webpack优点
1. 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
2. 模块规范支持全面，amd/cmd以及shimming等一应具全
3. 浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
4. 插件机制完善，实现同样模块化，容易扩展
webpack基本操作
`npm i webpack -g `
`webpack 原文件 新文件`
通过命令行使用。首选找到入口文件是.js
也就是你html中引入的js文件
`webpack ./main.js ./build.js -p`
-p代表压缩
1. 使用webpack打包解决文件依赖关系
webpack 基本命令
`webpack ./index.js ./build.js`
会以index.js作为入口分析文件依赖关系，合并文件
2. 使用webpack配置文件
默认命令结构是 `webpack 入口文件(entry) 出口文件(output)`, 也可以使用配置文件来操作, 当我们`使用webpack命令`的时候, 该命令行工具会自动查找我当前目录下的webpack.config.js, 文件内部是一整个被Module.exports导出的对象
代码:
module.exports = {
entry:{
'main':'./main.js'
},
output:{
filename:'./build.js'
}
}
关于文件的依赖问题，webpack会自动解析, 默认可以走commonjs模块规范
3. 引入css问题
由于涉及到了css和style
顺序：我们应该先处理一下css再处理style
配置文件中的module属性
他是一个对象，可以有loaders属性
loaders:[是loader]
loader的样子是这样{ test:/\.css$/,loader:'style-loader!css-loader'}
由于需要引入loader所以先需要下载并且配置
npm i css-loader style-loader -D
webpack中你看到s复数，就是数组
操作流程:
构建index.css
通过require('./index.css');将其引入进来，告知webpack找到对应的依赖
安装响应的依赖
开发依赖凡是打包的 `npm i style-loader css-loader -D`
在webpack.config.js文件中加入
代码:
module.exports = {
//设置入口文件
entry:{
'main':'./main.js' //默认main就会作为启动
},
//设置输出文件
output:{
filename:'./build_new.js'
},
module:{ //设置相关模块的声明
loaders:[ //每一个元素都是对象
{
test:/\.css$/,//设置匹配文件
loader:'style-loader!css-loader' //设置依赖的加载器
}
]
}
}
sublime terminal配合
preference-> package settings
terminal -> settings default
{
// window下终端路径
"terminal": "D:\\cmder\\Cmder.exe", //你的文件解压路径
// window下终端参数
"parameters": ["/START", "%CWD%"]
}
es6
import 不能再函数中使用，一定顶层中,习惯性都写在最上方
import和commonjs不一样 是import 和export
没有用default 的export 你怎么导出的，我就得怎么导入，叫做按需加载，可以导入部分
没有默认导出的：
导出方: 声明式` export var num1 = 1; //{num1} export var num2 =2; {num1,num2}`
以上语句最终相当于 `向外暴露了 {num1,num2}`
导入方: 就得和其写法一致，当然可以选择部分 `import {num1,num2} from './cal.js`
有默认导出的__可以在引入的时候不必名称完全一致__
导出方 : `export default obj;`
导入方：`import 别名 from './cal.js'; `
默认导出也还有使用* 号的方式，那么就代表着被导出的内容全拿
webpack-ES6的处理
webpack.config.js文件中
loaders下加入一个对象
test:指定是.js文件后缀的进行处理
loader:'babel-loader', //需要下载，依赖babel-core
exclude:/node_modules/,排除路径
options: 对象
内部: presets:['es2015'],预设解析es6关键字
plugins:['transform-runtime'], //解析es6的函数
下载的名称：
npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime
需要自动补前缀: autoprefixer-loader
less的使用
1:安装对应包
编译less-loader需要less的支持
less不必写入到loader中
安装 `npm i less less-loader -D`
sass的使用
1:安装对应包
加载器是sass-loader
其依赖的是node-sass
node-sass不必写入到loader中
安装 `npm i sass-loader node-sass`
3. 处理图片
1:安装对应包
加载器是url-loader
其依赖的是file-loader
file-loader不必写入到loader中
安装 `npm i url-loader file-loader`
4. 处理字体图片
在url-loader中加入ttf的后缀名来处理
?limit=1,如果设置过于小，这个图片就会生成一个文件，占用一次请求
包括字体图片也是一样
5. base64编码
base64编码邮件形式、将比较小的图片可以通过base64的形式放入到css中
对于图片本身来讲，跟css共同用了一次
使用的时候，图片不宜过大，base64编码会将原来的图片大小增加三分之一
由A-Za-Z0-9+/ 组成，以==结尾
6. 生成html文件插件
安装包
npm i html-webpack-plugin webpack -D
html-webpack-plugin 自动生成html文件到dist目录
webpack是其依赖
ES6中的模块
没有默认导出的部分
导出方:` export var xxx = xxx;` //这个就相当于导出一个{ xxx }
`var xxx= xx; export = { xxx}`
以上两种方式对应的获取方式是一样的
导入方: import { xxx } from './xxx.js';根据其暴露的空对象中的接口获取
简单来说，就是和他们导出的样子一样即可
有默认导出的时候
导出方: `export default obj;`
导入方: `import objCal from './xxx.js';`
注意: ES6中规定import不能再函数中，建议要放在代码上方
比较前面两者的不同: 有默认导出，名字你随意，如果不是默认导出 一定要和导出方暴露接口的形式一致才行
ES6中的代码变化
函数声明
var obj = {
add:function(n1,n2){
return n1 + n2;
},
sub(n1,n2){ //ES6
return n1 - n2;
}
}
对象声明
var name = 123;
var obj = {
name //这个时候有一个属性名是name，value是123
}
base64 在node中的编码解码
编码base64:Buffer.from('javascript').toString('base64');
解码成utf8:Buffer.from('amF2YXNjcmlwdA==','base64').toString();