抓包
移动端H5页面,查看网络请求,需要用工具抓包
windows一般有fiddler
Mac OS 一般用Charles
抓包过程
手机和电脑连同一个局域网
将手机代理到电脑上
手机浏览网页,即可抓包
查看网络请求
网址代理
https
webpack
压缩代码,整合代码,让网页加载更快
安装webpack
npm install webpack-cli -D
然后在目录下建一个名为webpack.config.js的配置文件
const path = require('path')
module.exports{
mode:'development';//开发模式 production上线模式(这个会压缩的比较小)
entry:path.join(__dirname,'src','index.js') //文件入口
output:{
filename:'bundle.js'//文件名
path:path.join(__dirname,'dist'文件夹)//目录
}
}
然后去package.json文件中,在scripts中添加"build":"webpack"; "dev":'webpack-dev-server'
安装一个插件npm i html-webpack-plugin-D
,用来解析html的插件
安装启动服务的插件npm i webpack-dev-server -D
然后去配置这两个插件
const path = require('path')
module.exports{
mode:'development';//开发模式 production上线模式(这个会压缩的比较小)
entry:path.join(__dirname,'src','index.js') //文件入口
output:{
filename:'bundle.js'//文件名
path:path.join(__dirname,'dist'文件夹)//目录
},
plugins:[
new HtmlWebpackPlugin({
template: entry:path.join(__dirname,'src','index.html') //找到已有的html
filename:'index.html'//产出的文件名
}),
devServer:{
port:3000,
contentBase:path.join(__dirname,'dist')
}
]
}
### babel
需求:目前大多数的浏览器并不支持es6的语法和模块化
所以利用babel可以将es6转化成es5的代码
* 1安装babel `npm i @babel/core @babel/preset-env babel-loader -D`
* 2 建立一个名为`.babelrc`的一个配置文件
{
"presets":["@babel/preset-env "]
}
* 3在webpack.config.js中写
module:{
rules:[
{
test:/.js$/,
loader:['babel-loader'],
include:path.join(__dirname,'src'),
exclude:/node_modules/
}
]
}
模块化就是导出和导入
比如下面两个文件
导出
const name = "hx"
const obj = {
age:18,
sno;15662
}
export{name,obj}
导入(解构)
import {hx,obj} from '目录'
如果只想导出一个
export default xxx 导入直接 import xxx from '目录'
网友评论