Webpack构建工具(2023-1-4)

第一章:构建工具

1.构建工具

	当我们习惯了在node中编写代码的方式后 在回到前端编写JavaScript html这些东西会感到各种不方便  浏览器的兼容性问题 即使可以模块化规范也会面临着模块过多的加载问题

迫切的希望有一款工具可以对代码进行打包  将多个模块打包为一个文件 这样一来就解决看兼容性问题 又解决了模块过多的问题

构建工具就起到了这样的一个作用 通过构建工具可以使用esm规范编写的代码转换为旧的js语法 这样可以使的所有的浏览器可以支持代码

2.Webpack

使用步骤:
	1.初始化项目  终端输入:npm init -y
	2.安装工具  Webpack  Webpack-cli  终端输入npm add -D webpack  webpack-cli

	3.在项目中创建src目录  然后再src目录中编写代码(index.js)
	
	4.书写完成后  终端输入npx  webpack  完成打包



Webpack配置文件:Webpack.config.js



第二章:Webpack配置文件

1.常用的方法依赖

/*


entry:表示入口文件  参数是一个文件路径





* */


module.exports={
    mode:"production",//设置打包模式 production表示生产模式 development表示开发模式
    entry:"./hello/hello.js",//用来指定打包时的主文件  默认 ./src/index.js  传入的参数可以是数组 可以是对象
        output:{
        //配置代码打包后删除的地址
            path:"",//指定打包的目录  必须要绝对路径
            filename:"build.js",//打包完成后的文件名称
            clean:true,  //自动清理打包目录
        },
    /*
    * Webpack默认情况下 只会处理js文件 如果我们希望它可以处理其他类型的文件 则要为其引入loader
    *           以css为例:
    *                       --使用css-loader可以处理js中的样式
    *                       --使用步骤:
    *                   1.安装:npm add css-loader -D
    *                   2.配置:module:{
    rules:[
        {
            test:/\.css$/i , //匹配以css结尾的
            use:"css-loader"
        }
    ]
}
    *
    *
    * 使用各种类型的文件  需要配置后各种对应的loader
    *
    * */

module:{
    rules:[
        {
            test:/\.css$/i , //匹配以css结尾的
            use:"css-loader"
        }
    ]
}


}






/*
* 在编写js代码的时 经常需要使用一些js中的新特性  二新特性在旧的浏览器中兼容性并不好  此时旧导致我们无法使用一些新的特性
*       我们下载就需要使用新的特性  我们可以采用折中的方案 引入使用新的特性编写代码  但是代码编写完成时候 我们可以通过一些工具将
* 新的代码转换为旧代码
*
*       babel:将性的js语法转换为旧的js 提高代码的兼容性
*       在Webpack中使用babel  需要在Webpack中引入
*
*
*       使用步骤:
*           1.安装        npm install -D babel-loader @babel/core @babel/preset-env
*           2.配置
*           3.在package.json中设置兼容列表
*
*               "browserslist":[  defaults  ]
*
* */



/*
*
* 插件: 插件用来为Webpack扩展功能
*       html-Webpack-plugin  这个插件可以在打包代码后  自动在打包目录生成html页面
*           使用步骤:
*               1.安装依赖  npm add -D html-webpack-plugin

*               2.配置插件
* */

2.Vite使用

前端构建工具:vite  相较于Webpack vite采用了不同的运行方式
		在开发时 并不对代码打包  而是直接采用esm的方式来运行项目
		在项目部署时在对项目进行打包
		除了速度外 vite使用起来也比较方便  
		
		使用步骤:
				1.终端输入npm add -D vite 安装开发依赖
				2.输入npx vite
				3.vite的源码目录就是项目根目录
				
				
				使用命令构建:
					npm create vite@latest
					npx create vite
					pnpm create vite







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值