什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案

主要功能：它提供了友好的前端模块化开发，支持代码压缩混淆，处理浏览器端 js 的兼容性，性能优化等强大功能。

体验webpack

最终实现效果如图：
在这里插入图片描述

第一步：新建文件夹，不允许携带中文。并右键打开终端
在这里插入图片描述
在终端中输入

npm init -y，初始化包管理配置文件 package.json

第二步，在当前文件夹下，创建文件夹，src 源代码目录。并在 src 目录下，创建 index.html 首页，和 index.js 脚本

在这里插入图片描述
名称固定，因为 webpack 默认打包入口 index.js

第三步，初始化首页基本结构
在这里插入图片描述

此时我们打开网页，会发现 jquery 并没有生效，打开控制台，会发现报错如下：

这是因为我们在 index.js 中，使用了 ES6 的语法

import $ from 'jquery'

为了解决这种报错，或者说“不兼容 ES6 语法的问题”，我们下面将使用webpack。

终端运行如下命令，安装 webpack 相关两个包：
npm install [email protected] [email protected] -D

运行完成后，打开 package.json 可以看到：
在这里插入图片描述
值得一提的是

在文件夹下创建文件 webpack.config.js
在这里插入图片描述
然后初始化如下基本配置：

打开 package.json 的 scripts 节点，新增 dev 脚本如下：

最后，在终端运行 npm run dev 命令，启动 webpack 进行项目的打包构建

最后最后一步，打开 index.html
在这里插入图片描述
打开网页，完成。