首页 > 其他分享 >认识什么是Webpack

认识什么是Webpack

时间:2024-04-01 16:32:04浏览次数:26  
标签:认识 什么 webpack js Webpack css loader 打包

目录

1. 认识Webpack

1.1. 什么是Webpack?(定义)

1.2. 使用Webpack

1.2.1. 需求

1.2.2. 步骤

1.3. 入口和出口默认值

1.3.1. 需求代码如下

2. 修改Webpack打包入口和出口

2.1. 步骤:

2.2. 注意

3. Webpack自动生成html文件

3.1. 插件 html-webpack-plugin

3.2. 步骤

 4. Webpack打包css代码

4.1. 加载器 css-loader

4.2. 加载器 style-loader

4.3. 步骤


 

1. 认识Webpack

1.1. 什么是Webpack?(定义)

静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件

打包:把静态模块内容,压缩,整合,转译等(前端工程化)

把 less / sass 转成 css 代码

把 ES6+ 降级成 ES5

支持多种模块标准语法

1.2. 使用Webpack

1.2.1. 需求
  • 封装 utils 包,校验手机号长度和验证码长度,在 src/index.js 中使用并打包观察
1.2.2. 步骤

  • 新建并初始化项目,编写业务源代码
  • 下载 webpack webpack-cli 到当前项目中(版本独立)

npm i webpack webpack-cli --save

  • 配置局部自定义命令

  • 运行打包命令,自动产生 dist 分发文件夹(压缩和优化后,用于最终运行的代码)

npm run build

1.3. 入口和出口默认值

  • 入口的默认值是'./src/index.js'
  • 出口的默认值是'./dist/main.js'
1.3.1. 需求代码如下

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6
/**
 * 目标1:体验 webpack 打包过程
 */
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from './utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果(npm run 自定义命令)
{
  "name": "test01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

 

2. 修改Webpack打包入口和出口

2.1. 步骤:

  • 项目根目录,新建 webpack.config.js 配置文件
  • 导出配置对象,配置入口,出口文件的路径
  • 重新打包观察

2.2. 注意

  • 只有和入口产生直接/间接的引入关系,才会被打包

在出口output对象里面添加属性——clean: true  //生成打包后内容之前,清空输出目录

 

3. Webpack自动生成html文件

3.1. 插件 html-webpack-plugin

  • 在 Webpack 打包时生成 html 文件

3.2. 步骤

  • 下载 html-webpack-plugin 本地软件包

npm i html-webpack-plugin --save-dev

  • 配置 webpack.config.js 让 Webpack 拥有插件功能

  • 重新打包观察效果

 

 4. Webpack打包css代码

注意:

Webpack 默认只识别 js 代码

把css文件要跟入口文件产生引入关系

4.1. 加载器 css-loader

  • 解析 css 代码

4.2. 加载器 style-loader

  • 把解析后的 css 代码插入到 DOM

4.3. 步骤

  • 准备 css 文件代码引入到 src/login/index.js 中(压缩转译处理等)
  • 下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

  • 配置 webpack.config.js 让 Webpack 拥有该加载器功能

  • 打包后观察效果

 

标签:认识,什么,webpack,js,Webpack,css,loader,打包
From: https://blog.csdn.net/m0_57184906/article/details/137235272

相关文章

  • 2024科软410分复试被刷!做错了什么?
    真不是择校问题!是典型的备考时间互侵性高度挤压问题。四战跨考数二144英二81复试被刷,太可惜了!从分数可以看到,数二144,英二81,但408只有104,加上复试机考表现欠佳,大概率存在科目间复习时间的挤压。今年的数二计算量比往年更大,出题不常规,能考到144,是需要一定实力的。例如,数......
  • 什么是拖拽式工作流引擎?优点有什么?
    想要提高工作效率,做好企业内部数据资源管理,那么就需要了解当下较为流行和实用的低代码技术平台。随着社会和进步和行业的发展,越来越多的中小企业看到了数字化转型带来了巨大变化和发展优势,借助于低代码技术平台、拖拽式工作引擎的优势特点,可以帮助客户实现发展愿望。那么,什么是拖......
  • Node.js中什么是RPC通信?和Ajax有啥区别?
    什么是RPC通信先导语对于后端人员来说,RPC通信是一个很熟悉的也很容易理解的东西,但是对于像我这样的前端人员来讲,对RPC就比较陌生,理解起来也相对困难一点了。对于这个问题,我们今天来尝试下,站在前端的角度来理解下RPC通信。【推荐学习:《nodejs教程》】RPC和AjaxRPC和Ajax是很相......
  • 3D设计用虚拟云桌面的体验为什么不太好?
    3D设计是一项对计算资源要求极高的工作,设计师在进行3D建模、渲染和动画等操作时,需要高性能的计算机硬件支持。近年来,随着云计算技术的发展,越来越多的设计师开始尝试使用虚拟云桌面进行3D设计。尽管虚拟云桌面在理论上能够提供灵活、高效的计算资源,但在实际体验中,许多设计师却......
  • Intel GuC和HuC分别有什么作用
    Intel图形固件包括几个组件,如GraphicsMicrocontroller(GuC)和HuC(H.264/HEVCVideoDecode/EncodeandVirtualizationCommandStreamer)。这些组件是设计来提高图形性能和减少CPU的负担的。让我们详细探讨GuC和HuC各自的作用:GuCGuC是一个内嵌在GPU内的小型处理器,它负责管理图形命......
  • 电池充电器上架亚马逊的检测标准是什么?怎么办理?
    电池充电器上架亚马逊的标准是UL1310认证。UL认证又分为很多种其中亚马逊常见的UL标准和测试内容?电源适配器UL60950-1测试报告;UL60950-1是IT类电源的一个北美安规标准,主要是针对电源的温升、耐压、绝缘等提出的要求。不同的产品,不同的地区有不同的安规标准;锂电池组UL2054测......
  • 什么原因让你想当程序员?只是顺利拿到 20k 无压力?
    部门捞人,前后端可投,点击通道即可:https://jinshuju.net/f/o38ijj第一点,钱多,即便非顶尖人才也能有较好的收入第二点,需求大,容易找到工作因为大多数人都是没背景、学历不高、颜值不高、人脉不广的第三点,现代社会,人情交际已经成了一些人的拖累,有的人甚至说出“见的人越多,就越喜欢计......
  • 超声波什么牌子好?热门顶配美的、希亦、苏泊尔清洗机硬核实测!
    如果你发现你新配的眼镜没戴多久就又脏又模糊,渐渐感觉自己的视力好像又加深了的话,那么你的眼镜要清洗了。要知道日常的普通手洗可能只是对眼镜表面进行了一定的清洗,但是却做不到深度清洁,长久佩戴模糊不清的眼镜不仅会导致我们的视力越来越深,还会危害到我们的眼部健康!所以我们需......
  • openGauss中的sequence跟Oracle的sequence有什么区别?
    openGauss中的sequence跟Oracle的sequence有什么区别?openGauss中也提供了sequence序列功能,使用Oracle的用户应该都非常喜欢使用这个功能。所以如果从Oracle迁移到openGauss,那么这项功能可以完全替代了。接下来我们简单测试一下:enmotech=>droptabletest;DROP......
  • 身份证实名认证接口会返回什么?javascript身份核验接口示例
    身份证实名认证接口是通过核验身份证号、姓名、证件头像等一系列的要素信息进行用户身份验证,那么,身份证实名认证接口一般在核验完成后会返回什么参数信息呢?下面翔云API小编为大家答疑解惑!一般情况下,身份核验只会返回一致或者不一致的结果,不一致的情况下会返回那些参数不一致,以翔......