什么是webpack?
- webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
webpack解决什么问题?
- 合并、压缩、精灵图、图片的Base64编码
- 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;
- …
- 使用Webpack, 是基于整个项目进行构建的;
- 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
- 根据官网的图片介绍webpack打包的过程
- webpack官网
webpack安装的两种方式
- 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令
- 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
Start
安装
- webpack安装的两种方式
- 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令
- 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
栗子
- 例如使用webpack打包构建列表隔行变色
- 运行npm init初始化项目,使用npm管理项目中的依赖包
- 创建项目基本的目录结构
- 使用cnpm i jquery --save安装jquery类库
- 创建main.js并书写各行变色的代码逻辑:
// 导入jquery类库
import $ from 'jquery'