前端工程化与webpack
(一)前端工程化
1、前端开发:
2、前端工程化:
3、 前端工程化的解决方案(eg:webpack):
4、webpack:
(二)安装和配置webpack
1、安装webpack:在项目中安装webpack,执行命令npm Install webpack@5.42.1 webpack-cli@4.7.2 -D。
其他:
-D语法表示:
补充-S和-D语法:
注意:可在(网址)npmjs.com中进入官网,进行查找是否为-S还是-D。
2、配置和使用webpack:
配置和使用webpack的理论:
实现配置和使用webpack的步骤如下:
(三)webpack的基本使用
1、案例:创建列表隔行变色项目
①新建了一个全英文的空白目录,即change-rows-color文件夹作为根目录,双击进入文件夹中,首先单击地址栏,输入cmd,在cmd中输入npm init -y命令,即出现package.json文件,即完成了初始化包管理配置文件package.json。
②创建src源代码目录:
③右击change-rows-color文件夹,用Visual Studio Code打开,进入软件中,创建index.html和index.js。
④初始化首页基本的结构:即创建9个<li>
⑤运行npm install jquery -S或者npm i jquery -S命令,即完成下载jquery。
分析-S(=--save)也可省略:
⑥通过ES6模块化的方式导入jQuery,实现列表隔行变色。
⑦报错:出现了语法问题(SyntaxError),没能实现功能,原因是ES6导入语法为高级语言,有浏览器兼容问题,跑不起来,此语句不能执行,可以想想webpack能否解决。
⑧安装配置使用webpack。
⑨改引用main.js,因为之前的index.js中有兼容性问题,dist->main.js为系统自动生成的解决兼容性问题。
最终成功解决了问题实现了隔行变色的功能如下图:
2、 压缩:
首先修改值:
之后,再次执行一次使用命令npm run dev。
3、webpack.config.js中的module选值(development和production)问题:
4、webpack的entry和output:
①默认的webpack的entry和output:
②修改webpack的entry(把index.js修改为index1.js):
③修改webpack的output(把main.js修改为bundle.js):
5、webpack的插件
每次使用修改源代码都得重新执行npm run dev,非常麻烦,解决办法如下:安装配置webpack的插件webpack-dev-server,会实现每次修改源代码可以直接ctrl+S,直接运行。
(1)安装配置使用webpack-dev-server插件
①安装webpack-dev-server插件:运行npm install webpack-dev-server@3.11.2 -D。
②配置webpack-dev-server插件:
③若想要停止打包(即上图终端):在cmd中继续两次ctrl+c。
④注意:运行浏览器看结果,必须用如下的地址localhost:8080/src,即终端中npm run dev中的地址+src:——————但是浏览器中出现的结果为之前的,还是不对,此插件没有把bundle.js放到物理磁盘中,放在内存(暂存了,可以频繁读写,速度快)中了,
所以,若想看实际最近的运行结果,应如下:
再访问localhost:8080/src,即终端中npm run dev中的地址+src。
(2)安装配置使用webpack-dev-server插件
进入localhost:8080,出现结果如下,若想看运行结果,还得+src,如何解决呢:
解决办法如下:把index.html复制一份到根目录下,即可达成进入localhost:8080,就会出现运行结果。
①安装html-webpack-plugin插件:运行npm install html-webpack-plugin@5.3.2 -D。
②配置html-webpack-plugin插件:
配置html-webpack-plugin插件的理论:
配置html-webpack-plugin插件的实际操作,都在webpack.config.js中写,如下:
重新打包一下,即:npm run dev
注意:虽然index.html已复制一份到根目录,但是是存放的内存中的,是虚拟存在的,肉眼看不到的。
以上,即可达成进入localhost:8080,就会出现运行结果。
注意:进入localhost:8080,看到的运行结果是虚拟的index.html,不是磁盘上的index.html,是不一样的。
(3)html-webpack-plugin插件的特性:
注意:显示浏览器运行结果(内存上的index.html)。
6、不想配置webpack还想体会到webpack的好处:
在浏览器中搜索vue-cli,出现VUE CUI工具。
7、了解devServer节点
8、webpack中的loader(加载器):
(1)loader:
(2)不建议在index.html中引入脚本,可在index.js中导入.css文件。
(3)打包处理.css文件:
理论:
实操:
(4)总结打包处理.css文件的步骤:
(5)打包处理less文件:
①创建index.less文件
②在index.js中引用index.less
③打包处理less文件:
(6)另:扩展:base64
把图片转成base64形式,防止发生小图片的网络请求。
缺点:体积会变大,eg:12KB的图片,转成base64形式可能会变成15KB的。
所以,不建议把大图片转成base64的形式,可以把小图片和小logo转成base64的形式。
(7)打包处理样式表中与url路径相关的文件:
理论:
实操案例:处理图片文件的loader
①
②运行报错:
③
④处理图片文件的loader
(7)用babel-loader打包处理js文件中的高级语法:
实操:
①(上图中代码写在index.js中,另起头开始写)上图中代码会出现问题,采用babel-loader解决,如下:
注意:上图不需自己敲,可以查找bable的官方,进行复制。
9、配置webpack的打包发布
最后会形成一个dist文件夹。
优化:
①把JavaScript文件统一生成到js目录中:
②把图片都放到image文件夹中:
③自动删除dist旧文件:其中2,3步在webpack.config.js中编写。
10、Sourse Map
①在开发阶段,解决问题如下:
②在生产阶段,解决问题如下:
理论:
实操:
③总结:
注意:只要修改webpack配置文件就要重新打包,即在cmd中继续两次ctrl+c。
11、webpack中的@
注意:
@直接从根目录(外)直接找到目标文件(里),推荐使用@
../是从目标文件(里)往外查找
但,用之前要配置一下@,如下: