前端发展的几个阶段

（即为什么会出现webpack）

前端开发的复杂化

前端开发目前我们面临哪些复杂的问题呢？
1）比如开发过程中，我们需要通过 模块化的方式 来开发；

因为现在前端开发的东西越来越多，即前端代码越来越多，需要有一种模式来管理代码 模块化开发：导入、导出 （在ES5中不支持）

2）比如，我们也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过 ES6+、TypeScript开发脚本逻辑，通过Sass、Less等方式来编写css样式代码；

浏览器不会直接识别这些高级特性 需要通过工具来将这些转化成浏览器能够识别的内容

3）比如开发过程中，我们还希望监听文件的变化来实时反映到浏览器上，以此提高我们的开发效率；

我们改动了一些文件，我们希望它能实时反映到浏览器上，这样我们前端人员就可以知道这些改动有没有问题了，可以提高我们的开发效率（而不是改动了很多，最后出问题了，我们都不知道是哪里的改动有问题）

4）比如开发完成后，我们还需要将代码进行压缩、合并以及其他相关的优化；
5）……

前端三个框架的脚手架

目前前端流行的三个框架：Vue、React 和 Angular

• 我们创建这些框架的项目时，都是借助于脚手架（CLI）的；（如Vue-cli）
• 这些脚手架Vue-CLI、create-react-app、Angular-Cli底层都是基于 webpack 来帮助我们支持模块化、Less、Typescript、打包优化等的

  这些脚手架底层封装了 webpack

vue3 打包工具是 vite

例子：看Vue-CLI中的webpack配置
Vue-CLI中的cli-service，里面是webpack的一些配置（第一张图）

Q：既然前端框架的脚手架中已经封装了webpack，我们就可以直接通过这些脚手架创建项目，那工作中，我们还需要用到 webpack 吗？（webpack工作中的应用）
1）日常的开发工作中：比如在开发vue、react、angular等项目的过程中，我们需要一些特殊的配置（定制化），比如：给某些目录结构起别名、让我们的项目支持Sass、Less等css预处理语言、让项目支持Typescript等，这些都需要我们手动配置 webpack；

给某些目录结构起别名：因为复杂的项目中，文件层级可能非常多，如果有的时候你需要引入一个文件的时候，需要../../../../这样的操作，很容易出错，所以，我们给目录结构起别名的话，会正确地引入文件 让项目支持Sass、Less等css预处理语言或TypeScript：有的时候，用脚手架创建项目的时候，可能默认不会配置这些，那我们就需要手动配置

2）当然，除了日常的开发工作，如果我们希望在原有的脚手架上来定制一些自己的特殊配置提供性能：比如安装性能分析工具、使用gzip压缩代码、引用cdn的资源、公共代码抽取等操作，甚至有的时候，我们需要自己去编写 loader 和 plugin；

引用cdn的资源：因为有些东西从cdn上下载的话，会更快一点

element UI框架中用到了很多 webpack配置 见github 可以学习参考怎么自己写 loader和 plugin 在element中，还有自己写的md-loader（主要用来加载、解析markdown文档）（当然，通常情况下，用官方的loader文件就够用了）

3）对于想要在前端领域进阶成为高级前端开发工程师，甚至是架构师的前端开发者来说，webpack等构建工具是必须要学习的，包括其中的一些高级特性和原理，都是要熟练掌握的。企业在招聘高级前端工程师或架构师时，必然会对webpack和其他的构建工具有比较高的要求。

webpack是什么

webpack是一个静态的模块化打包工具，为现代的JavaScript引用程序；

• 静态的（static）：这样表述的原因是我们最终可以将代码打包成最终的静态资源（然后部署到静态服务器上）；
• 模块化（module）：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
• 打包（bundle）：webpack可以帮助我们进行打包，所以它是一个打包工具；
• 现代的（modern）：我们前面说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

.hbs：是express中的内容 .cjs： 通过CommonJS的方式来开发

webpack 和 vite

Q：webpack 会被 vite 取代吗？
vite 推出后，确实引起了很多的反响，也有很多人看好 vite 的发展。但是目前 vite 取代 webpack 还有很长的路要走：
1）目前vue的项目既支持使用 vite，也支持使用 webpack；
2）react、angular的脚手架目前没有支持，暂时也没有转向vite的打算；
3）vite最终打包的过程，依然需要借助 rollup 来完成；
4）vite的核心思想并不是首创；

• 事实上，vite 的很多思想和之前的snowpack 是重合的，而且相对目前来说 snowpack 会更加成熟；
• 当然，后续发展来看， vite 可能会超越 snowpack

5）webpack一直在不断更新迭代

• webpack在发展的过程中，也不断地改进自己，借鉴其他工具的一些优势和思想；
• 在这么多年的发展中，无论是自身的优势，还是生态都是非常强大的

webpack安装

1.安装 Node.js

安装webpack之前，必须要先安装 Node.js。

因为webpack的运行环境是 Node 环境，所以我们电脑上必须要有Node（安装Node的时候，同时会安装npm）（因为Node.js自带了软件包管理工具npm）（安装完Node之后，就可以使用npm指令了）

1）官网，点击下载，正常安装即可

2）查看自己的node版本和npm版本

2.安装webpack

webpack在4.x版本之后，需要安装两个东西：webpack、webpack-cli

webpack-cli有无都可，不是必须要安装的

:::info webpack-cli 的作用 ::: :::info webpack 与 webpack-cli 的关系 ？？？

• 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
• webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
• 而webpack-cli中代码执行时，才是真正利用 webpack 进行编译和打包的过程；
• 所以，在安装webpack时，我们需要同时安装 webpack-cli（第三方的脚手架事实上是没有安装webpack-cli的，比如vue中，是用了vue-cli-service替代了webpack-cli的作用） :::

  看vue项目中，只安装了webpack，并没有安装webpack-cli（但是vue中安装了vue-cli-service替代了webpack-cli的作用）（看node_modules/bin文件夹下是没有webpack-cli的）

图 webpack执行过程

当你执行一个webpack命令的时候，它（谁？webpack？）会找到node_modules/.bin下的webpack（这个文件夹下的webpack在执行的时候，是依赖webpack-cli的，然后会调用runCli函数的，在runCli函数中，它会依赖webpack进行打包）；

如果webpack-cli没有安装，直接执行webpack相关指令的话，会报错（报错信息就是下面的notify）

1）全局安装webpack（直接安装到我们的电脑中）

在电脑上的很多地方都可使用

:::info // 在终端cmd
npm install webpack webpack-cli -g //默认安装最新版本 g(global,全局的意思） :::

2）局部安装webpack（是为了某个具体的项目安装的）

:::info //在webstorm里的终端
cd 对应目录 //先cd到对应的目录下面，再执行命令！！！ 老是忘记
npm install webpack webpack-cli —save-dev // 此处，webpack也可指定版本号
//—save-dev可以紧跟install后面；也可以放在最后（dev是dev-server的缩写）
//—save-dev（简写-D）是开发时依赖，项目打包后不需要继续使用的
:::

3）为什么全局安装后，还要再进行局部安装呢？

可以不安装全局的webpack

:::info A：因为在真实的开发中，比如你初入一个公司，从github上clone项目，项目用的可能是webpack3.6.0，但你电脑上的全局的webpack可能是4.1.0，版本不一致有可能会造成打包出现问题。所以通常一个项目，都有自己局部的webpack。

在终端（cmd，某个软件的terminal等）直接执行webpack命令，使用的全局安装的webpack；
当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack。 :::

package.json 中记录的是安装包的版本等信息 比如我clone的项目用的是 webpack3.x 的版本，在这个项目的package.json文件中会记录这些信息 那我clone了项目，想让项目跑起来的话，需要执行 npm install（执行该指令的时候，会根据package.json中各种安装包的信息安装对应版本的包）

webpack初体验

webpack的基本打包过程（用的是全局的webpack，尽管已经cd到某目录下，也是全局的）
直接执行 webpack 指令，它本质上会默认将src/index.js作为入口文件，进行打包

你写main.js，在某目录下运行 webpack执行指令，也是会报错的！！！

cd 到具体的目录
执行 webpack 指令

但是，目前有一个问题，只是将index.js打包了，但是index.html 没有被打包（后期讲 plugin 的时候会讲方法）

webpack的基本打包过程 - 用的是局部的webpack（常用）

全局webpack和局部webpack的不同用法
生成项目的package.json文件 npm init
局部安装 webpack npm install webpack webpack-cli —save-dev (npm install)

生成package-lock.json 和 node_modules

全局webpack：只要在终端直接敲 webpack 执行指令，执行的还不是局部webpack，执行的依然是全局的webpack！！！

使用局部webpack的几种方式：
1）想要执行局部 webpack 的执行指令：在终端敲 .node_modules/.bin/webpack

每次都这样敲的话，太麻烦了（指令太长了）

2）npx webpack

使用npx，它会自动执行node_modules下的命令 即 .node_modules/.bin/webpack

3）在 package.json 中配置
npm run build

你执行该指令，它会去package.json文件中的scripts下，找到创建的build，去执行里面的命令 而执行package.json文件中的命令时，它会优先去我们项目node_modules文件夹下去寻找webpack（如果本地没有安装webpack，它会再去全局查找webpack）

总结：本质都是 node_modules/.bin/webpack