webpack

一、ES6模块

关键词:export import

导出:

单个导出:

export  var  m = 111;

export  function xxx(){ }

export  class XX(){ }

引入时:import { xx,xx,xx as cc }   from   '文件路径'

合并导出,起别名:

export {xx,xx,xxx as cc}

引入时:import * as xx from '路径'  xx.?

export default { xx,xx,xxx as cc }

引入:import xx from '路径'

混合引入:

import  xx,{xx,xx}  from '路径'

需要导出时 用 export default{}  和 export  xx  配合

使用时:必须带有type="module"属性

而且必须走服务器

二、什么是webpack?

作用:
1. 可以把 ES6 规范 转为 ES5 规范, 让浏览器可以直接执行
2. 可以有效减少 网络请求的文件数量: 请求优化的一种方式
3. 图片打包: 剔除掉没有用到的图片, 减少垃圾数据

配置项中重要的配置:
mode: 打包的方式, 分产品和开发
entry: 要打包的 js文件路径
output: 出口, 打包之后的文件存放在哪里, 一般叫 dist
loader: webpack 本身只能打包 js 文件, 要想打包非js 文件, 则需要加载额外模块才能实现. loader 就是这些模块
plugins: 插件, 为webpack 提供更多的自动化的操作, 让开发更加简单快捷.

2.官网:https://www.webpackjs.com/

官方文档:https://www.webpackjs.com/concepts/

3.js的模块化写法

1.为什么要模块化?

作用1: 为了防止引入多个js文件, 产生全局变量污染, 出现冲突的情况

作用2:模块化这个概念最早期是 中国人在几千年前就发明的.

活字印刷术就是模块化 最早期的一个体现

       刻板印刷(非模块化)  --------所有内容融合在一起, 耦合性过高.导致剥离困难, 修复困难, 耦合性过高

       活字印刷术------------每个字都是一个模块,  每个模块之前没有关联, 耦合性低. 容易维护 和 复用

现代中 模块化的例子非常多

       台式电脑-------内存, 硬盘, cpu , 主板... 都是模块化

       反例: 非模块化的 手机-------内存坏了... 可能要直接换整个主板

 4.js的模块化

         1.可维护性  ------ 把 js代码的每个功能点 剥离出来, 形成单独的模块. 

后期做代码维护时, 升级等操作 都可以直接替换单独模块 而不需要整体修改代码. 可维护性高..

          2.复用性强:-------------同一个模块 可以被引入到多个位置, 复制操作. 

减少重复代码的编写

模块化的解决方案, 有四种规范

      1.CommonJS         --------|出现的比较早,都是第三方的规范,

      2.CMD                   --------|

      3.AMD                   --------|类似于CPU中的Intel amd ....都是国外的

      4.ES6                     --------新出的,是原生的,相当于华为的cpu,脱离了之前依赖别人家规范

                                               的窘境.

以前js原生没有模块化规范,所以只能依赖于别人家的规范,来借鉴使用.后来出现了

js自家的规范  ES6

差异:

1.CommonJS--------使用在node.js服务器上,是一个同步的.

同步:上公交要排队

速度稍慢,但是有序,对于服务器这种从硬盘上读取数据的场景,比较适用于

硬盘传输速度快

异步:上公交不排队,可以走门  可以爬窗.

2.AMD,CMD --------- 使用在客户端浏览器上,是一个异步的  

                                   速度快,适用于网络加载数据的情况,因为网速慢.

3.ES6  -------------   JS原生的,可以使用在前端 + 后台 都可以.

commonJS:  1.引入   require()  2.module.exports = { } 

                     注意:导出只能导出一个对象

                             一个js文件就是一个对象

ES6 -------------  1. JS原生提供的模块化规范:吸收了第三方模块化规范的优点,并且针对缺点进行了改进.

                            2.写法关键字:以前CommonJS     1.exports    2.requir    

                                                                    ES6     1.export      2.import 

                            3.导出个数: CommonJS:只能导出一个对象   

                                                           ES6:可以导出任意多个对象

运行时:必须通过服务器运行,否则报错

总结:

export  --------------- 单独导出

                                    1.export var变量 =值;

                                    2.export function 函数名(){ }

                                    3.export  class  类型{ }

                                    合并导出

                                    1.export{  值,值,值 as 别名 }                        

                                    2.export {  值,值,值 as 别名 }

 

import---------------自定义引入

1. import {要引入的值, 值 as 别名} from '文件路径'

2. 不同于node.js 的写法, 必须带有完整文件名, 即带有后缀名   

引入所有

1.import * as 别名 from '文件路径'

2.import 别名 from '文件路径'

混合导入

1. import * as 别名, {值, 值 as 别名} from '文件路径'   对应 export {}

2.import  别名, {值, 值 as 别名} from '文件路径'  对应 export default {}

3.

混合导入方式 {} 中的值, 需要在 export 时 单独声明导出,
例如:

export function getCompanyName(){

}