webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。

前言

• 学习和复习前端vue框架的时候，webpack是必须用到的的，而且是必须学到的。webpack的坑不少，更多的是版本的问题。以前刚开始学的时候，搞懂了，后来很长时间不碰，也都忘了，现在重新看了下，确实记忆深刻了不少，但还是想记录一番。并分别写出几个模块来学习

• webpack说白了，直接一点，就是一个前端的打包工具。想学习webpack，模块化开发是前提，因为webpack打包的前提就是模块化开发。

• 开发学习中的代码已经上传到GitHub，GitHub传送门https://github.com/fengfanli/learn_vue在其中的 ./day05_webpack使用和配置/01-webpack的使用目录下

• 其他博客如下：

1. webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。
2. webpack学习二：webpack初始用打包，webpack初始用配置文件打包，webpack安装对应的loader
3. webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。
4. webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发

一、模块化开发、webpack

这里先总述一下，下面在仔细说一下：

使用高级语法 ES6和 commentJS，进行 前端 模块化开发，但是浏览器识别不了，便使用webpack打包工具将高阶语法打包，变成浏览器可以识别的语法，如下图所示：

1. 模块化开发是一种思想，使用ES6和commentJS进行模块开发。
2. 模块化开发使用的都是高阶语法，浏览器识别不了，于是用webpack 将高阶语法，打包成低阶语法（方面理解）。
3. 可用npm包管理工具，安装webpack工具，npm的安装时通过node安装来获得的。

一、模块化开发（前端模块化）

模块化开发使用的进程

1. JavaScript原始功能

• 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。
  那个时候的代码是怎么写的呢？直接将代码写在< script>标签中即可

• 随着ajax异步请求的出现，慢慢形成了前后端的分离

1. 客户端需要完成的事情越来越多，代码量也是与日俱增。
2. 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。
3. 但是这种维护方式，依然不能避免一些灾难性的问题。

• 比如全局变量同名问题：看下边的例子
  
  

小明后来发现代码不能正常运行，去检查自己的变量，发现确实true
最后杯具发生了，小明加班到2点还是没有找到问题出在哪里(所以，某些加班真的是无意义的)

• 另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的

1. 但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情。
2. 而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

2. 匿名函数的解决方案

• 我们可以使用匿名函数来解决方面的重名问题
  在aaa.js文件中，我们使用 匿名函数
  
• 但是如果我们希望在main.js文件中，用到flag，应该如何处理呢？
  显然，另外一个文件中不容易使用，因为flag是一个局部变量。

3. 使用模块作为出口

• 我们可以使用将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？

• 来看下对应的代码：
  
  

• 我们做了什么事情呢？

1. 非常简单，在匿名函数内部，定义一个对象。
2. 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
3. 最后将这个对象返回，并且在外面使用了一个MoudleA接受。

• 接下来，我们在man.js中怎么使用呢？

1. 我们只需要使用属于自己模块的属性和方法即可

• 这就是模块最基础的封装，事实上模块的封装还有很多高级的话题：

1. 但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形。
2. 幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。

• 常见的模块化规范：
  CommonJS 、AMD、CMD，也有 ES6的Modules

4. CommonJS（了解）

模块化有两个核心：导出和导入

• CommonJS的导出：
  
• CommonJS的导入
  

5. ES6的导入导出export/import

a. export导出

• 导出属性

1. export指令用于导出变量，比如下面的代码：
   
2. 上面的代码还有另外一种写法：
   

• 导出函数
  
• 导出类
  
• export default 默认导出

1. 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
   这个时候就可以使用export default
   
2. 我们来到main.js中，这样使用就可以了
   这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字
   
3. 另外，需要注意：
   export default在同一个模块中，不允许同时存在多个。

b. import导入

1. 我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了
2. 首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module
   
3. import指令用于导入模块中的内容，比如main.js的代码
   
4. 如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
   通过可以导入模块中所有的export变量
   但是通常情况下我们需要给起一个别名，方便后续的使用
   

二、webpack

1. 什么是webpack

1. 官方的解释：
   At its core, webpack is a static module bundler for modern JavaScript applications.
   从本质上来讲，webpack是一个现代的JavaScript应用的 静态模块打包工具。
2. 两点解释：模块和打包
   模块化 上面讲了，webpack其实就是做打包的功能。
   

2. 为什么要使用webpack

在js中写es6的模块化的导入和导出，使用浏览器打开会报错，如下测试




打开index.html浏览器，会报错

所以由此证明，浏览器识别不了ES6和commentJS的模块化语法。
webpack就可以将高级语法打包成低级语法，这样浏览器就可以识别了。

3. npm 和 webpack

1. npm 全称：Node Package Manager 也就是 node 包管理器，类似于java中的maven。
   有关npm，可以看这个博客：npm 包管理工具 命令学习、使用。npm 创建react项目，npm创建vue项目。
2. node.js 中包含 npm包管理器，所以，下载node.js 便有了npm。
3. 再使用npm 下载 webpack。webpack就是一个打包工具
   命令使用流程
   下载node.js 安装后就可以使用npm了，所以
   node -v ：查看node版本
   npm -v ：查看npm版本
   npm install webpack -g ：全局安装webpack，-g：global