webhpack的基本使用

最新推荐文章于 2025-04-26 16:54:51 发布

杰克小飞猪

最新推荐文章于 2025-04-26 16:54:51 发布

阅读量451

点赞数 11

文章标签：前端框架前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/2401_89821127/article/details/147439844

版权

webpack

什么是webpack

定义：是一种静态打包工具
静态模块：指的是编写过程中的，html，css，js，图片等固定内容的文件
打包：把静态模块内容，压缩，整合，转译等(前端工具化)

把less/sass转成css代码
把ES6+降成ES5
支持多种模块标准语法

使用webpack

在这里插入图片描述

安装webpack

在这里插入图片描述

安装的软件包

安装的对应文件

配置相应执行代码

src index.js文件代码
utils check.js代码
运行
打包过程
warning警告

修改webpack打包入口和出口

观看webpack官方文档
在这里插入图片描述

目录
在这里插入图片描述

webpack.config.js中的配置
在这里插入图片描述

导出结果
在这里插入图片描述

案例登录页面

在这里插入图片描述

在这里插入图片描述

自动生成html文件

在这里插入图片描述

在这里插入图片描述

打包css代码

在这里插入图片描述

在这里插入图片描述

安装bootstrap通过npm i bootstrap
在使用时需要引入
在这里插入图片描述

引入后生效需要重新打包

优化提取css文件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

-save-dev指在开发环境中

优化压缩过程

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打包less代码

加载器less-loaer：把less代码编译为css代码

打包图片

资源模块
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目完善

在这里插入图片描述

把相关代码导出

webpack搭建开发环境

开发环境：配置webpack-dev-server快速开发应用程序
作用：启动web服务，自动监测代码变化，快速更新到网页

在这里插入图片描述

在这里插入图片描述

让web服务自动跳转到指定网页
在这里插入图片描述

webpack打包模式

告知webpack使用相应的内置优化

开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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