webpack和babel打包工具

抓包

移动端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 '目录'