1. 前言
image.png
因为 webpack 使用起来需要各种各样的配置，慢慢地就变成了“webpack 配置工程师”，时间久了就会有很多人放弃了
2. 详细的一些知识概括
-
webpack 是什么？
image.png
webpack 它不是一个框架或者是其他库什么的，它是一个前端模块化打包工具
- 什么是模块化？
image.png
image.png
模块化就是将系统分成一个一个独立的部分。你的模块之间有一个严格定义的模块之间的接口，然后模块之间具有透明性，就是假设一个 模块 b 可以引用 模块 a 导出的一个接口，模块 b 不会去了解这个详细的实现过程，它只是会使用这个接口，这就是一个模块的概念
- 为什么要模块化？
image.png
image.png
以前做前端开发的时候可能是比较简单，通过 js 写一些简单的运营页面，通过后台返回的一些数据放到 html 里，加一些简单的 js 实现一些动画，这个就是之前的 web 应用，但是现在的 web 应用变得越来越复杂了，越来越朝向一种 桌面式应用程序或者是单页的应用程序，这个时候再用以前的那种简单的代码组织方式已经无法满足我们实际生产环境中的架构需求了，所以我们就需要通过这种模块化的方式来组织我们的代码
- 模块化的历史
image.png
无模块时代
image.png
有一个 a.js 文件 和 b.js 文件，在一个 html 中单独引入这两个文件
这样做也会有一些相对的问题
image.png
依赖关系指的是，我们得先加载 a.js 再加载 b.js ，这个顺序是不能修改的
模块萌芽时代
image.png
这个虽然说把 a 和 b 封装成了私有变量 但是 moduleA 和 window.jQuery 还是全局的变量
现代模块时代
image.png
CommonJS 他其实只是一个规范，它是因为 NodeJS，NodeJS 是用了 CommonJS 做规范，然后有些工程师觉得这个 规范能不能在浏览器里 跑起来，但是 CommonJS 它有一个弊端，它不太适合在浏览器跑，所以就有了 像 RequireJS 这种异步模块定义规范， SeaJS 现在用的也是越来越少了，他其实是 另一种规范 CMD 的实现方法
AMD 和 CMD 的区别有哪些？ - 玉伯的回答 - 知乎
下面的 CommonJS 是在 NodeJS 里常用的
image.png
这个方法适合在服务器端，在浏览器端 require 的话，它就会异步的去请求这个 math 模块，它是一个异步的请求，没办法去同步的执行下面的 add 方法，所以 CommonJS 这种方法是很难在浏览器中实现的，所以就有了 RequireJS
image.png
这个就是 AMD 那种对异步模块的定义，它的主要实现方式是通过一些他自己定义的一些接口，通过异步回调的方式，引用一个模块，然后用这个模块的方法去执行
接下来的是 ES6 的 Module
image.png
- 模块化的价值
image.png
有像 AMD CMD 这样的规范，管理就是说我需要哪个模块可以单独的去引用去声明，最终就提升了代码的可维护性和复用性
image.png
高内聚就是说我只要在我的页面内引入某个模块，用这个模块在里面做一些事情就可以了，无关于其他的模块，低耦合就是 这个模块跟其他的模块没有任何的关系，只要去声明这个模块本身定义的一些接口就可以了，跟其他模块的关系就可以了
- 为什么要用 webpack ？
image.png
因为现在的主流框架 像 React、Vue 之类的它们都是用的 webpack 作为它们前端的打包工具
image.png
webpack 主要做的是哪些事情，上图，主要是将我们平时写的那些 左侧的东西，它们的相互依赖是非常多的，通过中间的 webpack 编译、打包之后就生成了 右侧的浏览器可以识别的静态资源
image.png
webpack 中流行这样一句话，万物皆模块，不只是 js 可以是一个模块，css 等其他的都可以是一个模块
image.png
webapck 这个东西在出来的时候，他想要实现的一些目标的简单列举
- webpack 主要应用
image.png
webpack 安装命令
image.png
这个是 webpack 官网的一个例子，首先写了一个 cats.js 的文件在最后把里面的 cats 数组进行了导出，在 app.js 中 require 了 cats.js 这个文件，这样就直接可以用 cats 这个数组了
image.png
整个执行时的原理：首先会分析 app.js 中的一些依赖，分析之后呢会把整个 app.js 文件中的代码和他所分析到的依赖的代码 合并压缩打包成 app.bundle.js 文件
image.png
在实际项目中可能不止是上面的一个文件，我们应该有一个 像 src 这样的放一些项目中的文件图片等等东西的目录，然后会有一个 node_module 放项目中依赖、安装的项目所需的库的目录，还会有项目配置文件 webpack.config.js ，还有就是 bin 或者 build 是生产环境（最终要发布到线上）的一个目录
image.png
webpack 主要的五大模块，需要在 webpack.config.js 文件中配置的
image.png
Loders 就是说需要配置各种的静态资源，会需要通过不同的 loaders 去处理这些文件
image.png
Loaders 主要的一些功能
image.png
Loders 的安装方法
image.png
Loders 怎么去使用：第二种是比较常用的，在配置文件中设置
image.png
image.png
image.png
image.png
常见 Loaders 介绍
image.png
webpack 使用优化
image.png
image.png
image.png
image.png
image.png
image.png
image.png
webpack 默认是把 css 和 js 打到一个包里，引用了上图所用的模块之后便可以实现将 js 和 css 分开打包到两个文件里
网友评论