前端工程化工具 — webpack
实际的前端开发:
- 模块化(js的模块化、css的模块化、资源的模块化)
- 组件化(复用现有的U1结构、样式、行为)
- 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
- 自动化(自动化构建、自动部署、自动化测试)
目前主流的前端工程化解决方案:
- webpack( https://www.webpackjs.com/ )
- parcel( https://zh.parceljs.org/ )
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
简单案例
1、npm init -y
2、npm i jquery -S
安装webpack
nmp install webpack@5.42.1 webpack-cli@4.7.2 -D
//只在开发阶段需要加-D,开发和上线都需要用的加-S
//至于应该加-D还是-S,找https://npmjs.com
配置webpack
1.在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z0zszuTR-1670055253419)(D:\文件\markdown图片\image-20210925211349193.png)]
2.在 package.json 的 scripts 节点下,新增 dev 脚本如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bD0Ghy21-1670055253421)(D:\文件\markdown图片\image-20210925211442911.png)]
3.在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建
4.导入js文件改成
<script src="./dist/main.js"></script>
至此,兼容性问题解决
但是代码并没有压缩,如果要压缩,只需要把mode改为production
在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意:可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口与出口
在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgTA5w9U-1670055253421)(D:\文件\markdown图片\image-20210925213304825.png)]
webpack的插件
webpack 插件有如下两个:
① webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 每当修改了源代码,webpack 会自动进行项目的打包和构建
② html-webpack-plugin
- webpack 中的 HTML 插件(类似于一个模板引擎插件)
- 可以通过此插件自定制 index.html 页面的内容
webpack-dev-server
安装:
npm install webpack-dev-server@3.11.2 -D
配置:
修改 package.json -> scripts 中的 dev 命令如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juRimfyl-1670055253422)(D:\文件\markdown图片\image-20210925214930514.png)]
② 再次运行 npm run dev 命令,重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
为了更快的访问到修改的文件效果,可以加载内存中的bundle.js文件
<script src="/bundle.js"></script>
html-webpack-plugin
安装
npm install html-webpack-plugin@5.3.2 -D
作用:把src下的index.html文件放到根目录中
配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VZpAVID-1670055253423)(D:\文件\markdown图片\image-20210927093319412.png)]
HTML 插件在生成的 index.html 页面,自动注入了打包的 bundle.js 文件
devServer
在 webpack.config.js 配置文件中,可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHWdTSMI-1670055253424)(D:\文件\markdown图片\image-20210927094054910.png)]
loader
第三方加载器
如打包处理css文件,需安装
npm i style-loader@3.0.0 css-loader@5.2.6 -D
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZBBE9aV-1670055253426)(D:\文件\markdown图片\image-20210927202039531.png)]
打包处理less文件:
npm i less-loader@10.0.1 less@4.1.1 -D
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaFZd75O-1670055253427)(D:\文件\markdown图片\image-20210927202728768.png)]
打包处理样式表中与url 路径相关的文件
npm i url-loader@4.1.1 file-loader@6.2.0 -D
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfceGEqs-1670055253428)(D:\文件\markdown图片\image-20210927203723169.png)]
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKGgRcP7-1670055253431)(D:\文件\markdown图片\image-20210927204939199.png)]
安装babel-loader
处理高级语法
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2l4gl56d-1670055253443)(D:\文件\markdown图片\image-20210927205145880.png)]
配置 babel-loader
在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FclC4OjL-1670055253444)(D:\文件\markdown图片\image-20210927205637777.png)]
js文件导入
import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import logo from './images/logo.jpg'
打包发布
项目开发完成之后,需要使用 webpack 对项目进行打包发布,主要原因有以下两点:
① 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件
② 开发环境下,打包生成的文件不会进行代码压缩和性能优化
在 package.json 文件的 scripts 节点下,新增 build 命令如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phIsknhV-1670055253445)(D:\文件\markdown图片\image-20210927210453526.png)]
–model 是一个参数项,用来指定 webpack 的运行模式。production 代表生产环境,会对打包生成的文件进行代码压缩和性能优化。
上线时使用npm run build
将会压缩js等文件,可以把dist文件夹拷贝给后端了
在 webpack.config.js 配置文件的 output 节点中,进行如下的配置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SrWREDJv-1670055253446)(D:\文件\markdown图片\image-20210927211210448.png)]
修改 webpack.config.js 中的 url-loader 配置项,新增 outputPath 选项即可指定图片文件的输出路径:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7DzGgVJE-1670055253447)(D:\文件\markdown图片\image-20210927211227442.png)]
为了在每次打包发布时自动清理掉 dist 目录中的旧文件,可以安装并配置 clean-webpack-plugin 插件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2xYn9Cl-1670055253448)(D:\文件\markdown图片\image-20210927211624169.png)]
Source Map
开发环境下默认生成的 Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
开发环境下,推荐在 webpack.config.js 中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-faTHGIUE-1670055253449)(D:\文件\markdown图片\image-20210927212541200.png)]
在发布/生产环境下,最好关闭 devtool 选项,防止原始代码暴露给别有所图之人。
或者只定位行号,不暴露源码,可以将 devtool 的值设置为nosources-source-map。
实际开发会使用命令行工具(CLI)一键生成webpack的项目
路径问题
关于开发的时候,导入模块路径问题,最好不要从里往外用…/…/来找,太麻烦,使用从外往里找,@代表根目录
配置,在webpack.config.js的module.exports里面
resolve: {
alias: {
// 告诉 webpack,程序员写的代码中,@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
import info from '@/info.js'
Vue学习
组件化、声明式、虚拟化dom
容器和实例是一对一关系
特性:
数据驱动视图
双向数据绑定
MVVM模型
Mode 数据源、View 视图、ViewModel 就是 vue 的实例
Vue模板语法:
插值语法:用于解析标签体内容{ {xxx}}
指令语法:
内容渲染指令
v-text
把值渲染到p标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WsmDTpR-1670055253449)(D:\文件\markdown图片\image-20210928110747275.png)]
{ {}}语法
解决 v-text 会覆盖默认文本内容的问题。这种 { { }} 语法的专业名称是插值表达式(英文名为:Mustache)
注意不能用在属性节点,只能用在内容节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBVdJbxf-1670055253450)(D:\文件\markdown图片\image-20210928111025951.png)]
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素,则需要用到 v-html 这个指令:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-diirraL7-1670055253450)(D:\文件\markdown图片\image-20210928111218835.png)]
属性绑定指令
v-bind:
由于 v-bind 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 : )。单向绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUHXNXmg-1670055253451)(D:\文件\markdown图片\image-20210928111749772.png)]
JavaScript表达式
除了支持绑定简单的数据值之外,还支持 Javascript 表达式的运算
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7I3muhfh-1670055253452)(D:\文件\markdown图片\image-20210928112511283.png)]
事件绑定指令
v-on
vue 提供了 v-on 事件绑定指令,用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aK9nBpdr-1670055253452)(D:\文件\markdown图片\image-20210928120558397.png)]
注意:原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件,替换为 vue 的事件绑定形式后,分别为:v-on:click、v-on:input、v-on:keyup
通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SkemPss-1670055253453)(D:\文件\markdown图片\image-20210928120746423.png)]
如何在函数内部修改data数值
使用this.
由于 v-on 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 @ )。
$event
$event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。
$event 可以解决事件参数对象 event 被覆盖的问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IpSdWvsY-1670055253454)(D:\文件\markdown图片\image-20210928122238859.png)]
事件修饰符
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此,vue 提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。
常用的 5 个事件修饰符如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MfgiTEm-1670055253454)(D:\文件\markdown图片\image-20210928122638882.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0laBvskg-1670055253455)(D:\文件\markdown图片\image-20210928122645693.png)]
按键修饰符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvg0og3V-1670055253456)(D:\文件\markdown图片\image-20210928122959445.png)]
双向绑定指令
v-model
辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
相当于v-bind和v-on的语法糖
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sC2hSV46-1670055253456)(D:\文件\markdown图片\image-20210928123711583.png)]
只有表单元素才可以使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2wyJ0gwO-1670055253457)(D:\文件\markdown图片\image-20210928124241734.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GwkGJ5M2-1670055253457)(D:\文件\markdown图片\image-20210928124248353.png)]
条件渲染指令
v-if
动态添加和移除元素
结合v-else、v-else-if使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84HpiABr-1670055253458)(D:\文件\markdown图片\image-20210928160947560.png)]
v-show
添加和移除display:none
列表渲染指令
v-for
用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
用 item in items 形式的特殊语法,其中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xH7eESV0-1670055253459)(D:\文件\markdown图片\image-20210928165826255.png)]
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>