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();