Webpack的学习（第一章）前言为什么要用webpack 浏览器不是已经有es模块化了吗，为什么还要使用webpac

前言

为什么要用webpack

浏览器不是已经有es模块化了吗，为什么还要使用webpack，这不是多此一举？

网络请求问题

// 文件结构
js/ 
 └── a.js
 └── b.js
 └── c.js
index.html

// a.js
import './b.js'
console.log('a')

// b.js
import './c.js'
console.log('b')

// c.js
console.log('c')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./js/a.js" type="module"></script>
  </body>
</html>

我们可以使用VScode中的Live Server插件运行

运行结果没有问题，我们再看网络请求

可以看到当前我们在index.html中引入了a.js, a.js引入了b.js, b.js引入了c.js, 我们可以看到网络请求当中分别请求了abc模块，当我们在真正的企业级项目中，一个项目可能有成百上千个模块, 每个模块都需要进行网络请求, 这样项目的运行效率是非常的差的

包管理器问题

在根目录下, 使用npm安装jQuery

npm init -y

npm install jquery

在a.js中引入JQuery

// a.js
import $ from 'jquery'

console.log('a')

到浏览器中运行发现报错了, 这里报错的意思是es模块引入必须使用"./" "../", 那我们就尝试使用这种方式去引用JQuery看看行不行

import $ from '../node_modules/jquery/dist/jquery.js'

console.log('a')

到浏览器中运行发现又报了另外一个错误, 这个错误的意思是JQuery模块没有使用export default的方式导出, 这里我们可以到JQuery的代码中查看他的导出方式

在代码中发现JQuery使用的是CommonJs的方式导出, 但是浏览器是不支持CommonJs的, 所以在使用包管理工具安装不同的第三方模块，如果第三方模块使用的是CommonJs的方式导出, 那么浏览器不能直接运行, 而且第三方模块可能依赖了其他模块, 其他模块又依赖了更多模块, 结合上面的例子, 模块多代表要加载的文件更多, 那么项目运行效率就非常的差

开发和运行的区别

开发时态:

模块划分越细越好
支持多种模块化标准
支持npm或者其他包管理器下载的模块
能够解决其他工程化问题

运行时态:

文件越少越好
文件体积越小越好
代码内容越乱越好
所有浏览器都要兼容
能够解决其他运行时的问题，主要是执行效率的问题

解决方式

既然开发时态和运行时态有如此大的差异，因此我们需要一个工具，能够让开发者专心在开发时态写代码, 然后利用这个工具将开发时态的代码转换成运行时态所需要的东西，这个工具就叫做构建工具

常见的构建工具

webpack
grunt
gulp
其他