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

最新推荐文章于 2022-11-28 12:27:12 发布

java冯坚持

最新推荐文章于 2022-11-28 12:27:12 发布

阅读量618

点赞数

分类专栏： maven、npm、webpack 文章标签： javascript vue webpack npm

本文链接：https://blog.csdn.net/qq_40036754/article/details/113701510

版权

maven、npm、webpack 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章目录

前言
一、模块化开发、webpack
一、模块化开发（前端模块化）
二、webpack

前言

学习和复习前端vue框架的时候，webpack是必须用到的的，而且是必须学到的。webpack的坑不少，更多的是版本的问题。以前刚开始学的时候，搞懂了，后来很长时间不碰，也都忘了，现在重新看了下，确实记忆深刻了不少，但还是想记录一番。并分别写出几个模块来学习
webpack说白了，直接一点，就是一个前端的打包工具。想学习webpack，模块化开发是前提，因为webpack打包的前提就是模块化开发。
开发学习中的代码已经上传到GitHub，GitHub传送门https://github.com/fengfanli/learn_vue在其中的 ./day05_webpack使用和配置/01-webpack的使用目录下
其他博客如下：

一、模块化开发、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变量
但是通常情况下我们需要给起一个别名，方便后续的使用

二、webpack

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