美文网首页
webpack和babel打包工具

webpack和babel打包工具

作者: 扶光_ | 来源:发表于2023-08-08 22:36 被阅读0次

    抓包

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

    相关文章

      网友评论

          本文标题:webpack和babel打包工具

          本文链接:https://www.haomeiwen.com/subject/focopdtx.html