什么是 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
打开网页,完成。