文章目录
- 前言
- 一、模块化开发、webpack
- 一、模块化开发（前端模块化）
- 1. JavaScript原始功能
- 2. 匿名函数的解决方案
- 3. 使用模块作为出口
- 4. CommonJS（了解）
- 5. ES6的导入导出export/import
- a. export导出
- b. import导入
- 二、webpack
- 1. 什么是webpack
- 2. 为什么要使用webpack
- 3. npm 和 webpack
前言
- 学习和复习前端vue框架的时候，webpack是必须用到的的，而且是必须学到的。webpack的坑不少，更多的是版本的问题。以前刚开始学的时候，搞懂了，后来很长时间不碰，也都忘了，现在重新看了下，确实记忆深刻了不少，但还是想记录一番。并分别写出几个模块来学习
- webpack说白了，直接一点，就是一个前端的打包工具。想学习webpack，模块化开发是前提，因为webpack打包的前提就是模块化开发。
- 开发学习中的代码已经上传到GitHub，GitHub传送门https://github.com/fengfanli/learn_vue在其中的
./day05_webpack使用和配置/01-webpack的使用目录下 - 其他博客如下：
- webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。
- webpack学习二：webpack初始用打包，webpack初始用配置文件打包，webpack安装对应的loader
- webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。
- webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
一、模块化开发、webpack
这里先总述一下，下面在仔细说一下：
使用高级语法 ES6和 commentJS，进行 前端 模块化开发，但是浏览器识别不了，便使用webpack打包工具将高阶语法打包，变成浏览器可以识别的语法，如下图所示：
- 模块化开发是一种思想，使用ES6和commentJS进行模块开发。
- 模块化开发使用的都是高阶语法，浏览器识别不了，于是用webpack 将高阶语法，打包成低阶语法（方面理解）。
- 可用npm包管理工具，安装webpack工具，npm的安装时通过node安装来获得的。
一、模块化开发（前端模块化）
模块化开发使用的进程
1. JavaScript原始功能
- 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。
那个时候的代码是怎么写的呢？直接将代码写在< script>标签中即可 - 随着ajax异步请求的出现，慢慢形成了前后端的分离
- 客户端需要完成的事情越来越多，代码量也是与日俱增。
- 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。
- 但是这种维护方式，依然不能避免一些灾难性的问题。
- 比如全局变量同名问题：看下边的例子
小明后来发现代码不能正常运行，去检查自己的变量，发现确实true
最后杯具发生了，小明加班到2点还是没有找到问题出在哪里(所以，某些加班真的是无意义的)
- 另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的
- 但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情。
- 而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。
2. 匿名函数的解决方案
- 我们可以使用匿名函数来解决方面的重名问题
在aaa.js文件中，我们使用 匿名函数 - 但是如果我们希望在main.js文件中，用到flag，应该如何处理呢？
显然，另外一个文件中不容易使用，因为flag是一个局部变量。
3. 使用模块作为出口
- 我们可以使用将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？
- 来看下对应的代码：
- 我们做了什么事情呢？
- 非常简单，在匿名函数内部，定义一个对象。
- 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
- 最后将这个对象返回，并且在外面使用了一个MoudleA接受。
- 接下来，我们在man.js中怎么使用呢？
- 我们只需要使用属于自己模块的属性和方法即可
- 这就是模块最基础的封装，事实上模块的封装还有很多高级的话题：
- 但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形。
- 幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
- 常见的模块化规范：
CommonJS 、AMD、CMD，也有 ES6的Modules
4. CommonJS（了解）
模块化有两个核心：导出和导入
- CommonJS的导出：
- CommonJS的导入
5. ES6的导入导出export/import
a. export导出
- 导出属性
- export指令用于导出变量，比如下面的代码：
- 上面的代码还有另外一种写法：
- 导出函数
- 导出类
- export default 默认导出
- 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
这个时候就可以使用export default - 我们来到main.js中，这样使用就可以了
这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字 - 另外，需要注意：
export default在同一个模块中，不允许同时存在多个。
b. import导入
- 我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了
- 首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module
- import指令用于导入模块中的内容，比如main.js的代码
- 如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
通过可以导入模块中所有的export变量
但是通常情况下我们需要给起一个别名，方便后续的使用
1. 什么是webpack
- 官方的解释：
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的 静态模块打包工具。 - 两点解释：模块和打包
模块化 上面讲了，webpack其实就是做打包的功能。
2. 为什么要使用webpack
在js中写es6的模块化的导入和导出，使用浏览器打开会报错，如下测试
打开index.html浏览器，会报错
所以由此证明，浏览器识别不了ES6和commentJS的模块化语法。
webpack就可以将高级语法打包成低级语法，这样浏览器就可以识别了。
3. npm 和 webpack
- npm 全称：Node Package Manager 也就是 node 包管理器，类似于java中的maven。
有关npm，可以看这个博客：npm 包管理工具 命令学习、使用。npm 创建react项目，npm创建vue项目。 - node.js 中包含 npm包管理器，所以，下载node.js 便有了npm。
- 再使用npm 下载 webpack。webpack就是一个打包工具
命令使用流程
下载node.js 安装后就可以使用npm了，所以
node -v ：查看node版本
npm -v ：查看npm版本
npm install webpack -g ：全局安装webpack，-g：global