【铺垫知识】webpack 入门基础

什么是 webpack

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

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

体验webpack

1. 创建列表隔行变色项目

最终实现效果如图：

1.1 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

终端运行如下命令，安装 webpack 相关两个包：
npm install webpack@5.41.1 webpack-cli@4.7.2 -D

运行完成后，打开 package.json 可以看到：

值得一提的是

在项目中配置 webpack

在文件夹下 创建文件 webpack.config.js

然后初始化如下基本配置：

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

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

最后最后一步，打开 index.html

打开网页，完成。