Vue基础系统文章07---webpack安装和配置与打包
1、当前web开发困境
a.文件依赖关系错综复杂
b.静态资源请求效率低
c.模块化支持不友好
d.浏览器对高级js兼容性低
例如:模块代码实现隔行换色
1)在新建空白文件夹中运行:npm init -y 会初始化一个package.json文件
2)新建src文件夹,文件夹中建index.html
3) 运行:npm i jquery 安装jquery
4) 新建index.js文件,以模块化的方式引用jquery,并设置隔行换色,文件是这样的:
index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <script src="./index.js"></script> </head> <body> <ul> <li>11111111111</li> <li>22222222222</li> <li>33333333333</li> <li>44444444444</li> <li>55555555555</li> </ul> </body> </html>
index.js文件
import $ from "jQuery" $(function(){ $("li:odd").css("backgroundColor","pink"); $("li:even").css("backgroundColor","lightblue"); })
浏览器中运行,报错
要解决此问题,需要安装webpack
2、安装webpack,运行:"
3、项目根目录下新建webpack.config.js文件,内容如下:
module.exports={ mode:'development' }
4、在package.json 配置文件中的scripts节点下,新增dev脚本如下:
5、在终端运行:npm run dev 命令,启动webpack进行项目打包
再次打开index.html就可看到隔生换色的效果