webpack打包工具

news/2024/9/23 6:34:00/

目录

1. yarn包管理器

1.1 yarn 是什么, 有什么用?

1.2 yarn的使用

webpack%E5%9F%BA%E6%9C%AC%E6%A6%82%E8%BF%B0-toc" style="margin-left:80px;">​​​​​​2. webpack基本概述

webpack%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-toc" style="margin-left:120px;">2.1 webpack是什么？

2.2 什么是打包？

webpack%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F-toc" style="margin-left:120px;">2.3 webpack能做什么？

webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4-toc" style="margin-left:80px;">3. webpack基本使用步骤

webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4-toc" style="margin-left:120px;">3.1 webpack基本使用步骤

3.2 package.json 中 scripts 的使用

webpack%E7%9A%84%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE-toc" style="margin-left:120px;">3.3 webpack的基本配置

3.4 yarn build执行流程图

webpack%E6%8F%92%E4%BB%B6%E5%92%8Cloader-toc" style="margin-left:80px;">4. webpack插件和loader

webpack-plugin%20%E6%8F%92%E4%BB%B6-toc" style="margin-left:120px;">4.1 自动生成html - html-webpack-plugin 插件

webpack%E5%A4%84%E7%90%86css%E6%96%87%E4%BB%B6%20-%20css-loader-toc" style="margin-left:120px;">4.2 webpack处理css文件 - css-loader

webpack%E5%A4%84%E7%90%86%20less%20%E6%96%87%E4%BB%B6%20-%20less-loader-toc" style="margin-left:120px;">4.3 webpack处理 less 文件 - less-loader

webpack%E5%A4%84%E7%90%86%E5%9B%BE%E7%89%87-%E5%86%85%E7%BD%AEasset%E6%A8%A1%E5%9D%97-toc" style="margin-left:120px;">4.4 webpack处理图片 - 内置asset模块

webpack%E5%A4%84%E7%90%86%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87-%E5%86%85%E7%BD%AEasset%E6%A8%A1%E5%9D%97-toc" style="margin-left:120px;">4.5 webpack处理字体图标 - 内置asset模块

webpack%E5%A4%84%E7%90%86%E9%AB%98%E7%89%88%E6%9C%AC%E8%AF%AD%E6%B3%95-babel%E8%AF%AD%E6%B3%95%E9%99%8D%E7%BA%A7-toc" style="margin-left:120px;">4.6 webpack处理高版本语法 - babel语法降级

webpack%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%85%8D%E7%BD%AE-toc" style="margin-left:80px;">5. webpack开发服务器配置

webpack-%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8-toc" style="margin-left:120px;">5.1 webpack-开发服务器

webpack-%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8-%E7%AB%AF%E5%8F%A3%E5%8F%B7%E9%85%8D%E7%BD%AE-toc" style="margin-left:120px;">5.2 webpack-开发服务器-端口号配置

1. yarn包管理器

1.1 yarn 是什么, 有什么用?
快速、可靠、安全的 依赖管理工具 。和 npm 类似, 都是 包管理工具 , 可以用于 下载管理依赖包， 比 npm 下载包， 更 稳定 、 快速
1.2 yarn的使用
1.2.1下载安装
windows本推荐通过软件包安装
下载地址: https://yarn.bootcss.com/docs/install/#windows-stable
mac本推荐通过命令全局安装 sudo npm i yarn -g
1.2.2  使用yarn的命令装包
  • 初始化 yarn init 或 yarn init -y
  • 添加依赖 yarn add [package]@[version]
  • 移除包 yarn remove [package]
  • 安装项目全部依赖 yarn 或者 yarn install
  • 全局命令
    • 全局安装 yarn global add [package]
    • 全局卸载 yarn global remove [package]
    • 全局安装路径 yarn global bin

webpack%E5%9F%BA%E6%9C%AC%E6%A6%82%E8%BF%B0">​​​​​​2. webpack基本概述

webpack%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F">2.1 webpack是什么？
webpack是一个基于 NodeJS 的 静态模块打包器（HTML，CSS，JS，图片等资源都属于静态模块）
2.2 什么是打包？
打包基本认知：将多个文件 压缩 合并 处理的过程，就可以称之为是打包
好处：可以 减少请求次数 ， 减轻服务器压力，加快页面访问速度 。

webpack%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F">2.3 webpack能做什么？
明确：webpack是 基于NodeJS 的 打包工具。
①  合并压缩 ：将 html/css/js/图片等， 进行 资源 合并压缩 处理（打包）

②  语法转换：
        less / sass / stylus => css
        es6 / es7 => es5 / es3
        typescript => 原生js
        ...
③  提供开发服务器： 提供一个开发服务器，监测代码变化，实时打包，实时刷新浏览器 （ 提高开发效率 ）

webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4">3. webpack基本使用步骤

webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4">3.1 webpack基本使用步骤
  1. 新建项目文件夹，src/index.js
  2. 初始化 yarn init -y
  3. 安装依赖 yarn add webpack webpack-cli -D
  4. package.json 中，配置 scripts（自定义命令） ​​​​​​​​​​​​​

目录的说明
- dist 目录 ：存放打包后代码的目录
- src目录 ：存放源代码的目录
3.2 package.json 中 scripts 的使用
1. 配置命令：
         在package.json 文件中 ，可以 配置 scripts , 配置我们自己在终端的常用命令

2. 执行脚本：
         npm run 命令名 => npm run pp
        使用yarn： yarn 命令名 ，不加 run => yarn pp
webpack%E7%9A%84%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE">3.3 webpack的基本配置
webpack基本配置 - 配置入口，出口，模式
官方参考文档： https://webpack.docschina.org/concepts/
1. 入口 entry
说明: 配置入口文件，从哪个文件开始打包
2. 出口 output
说明: 配置输出文件，打包到哪里去
3. 模式 mode：
说明：打包模式
取值：
（1）production（生产环境， 代码压缩 ）
（2）development （开发环境， 代码不压缩 ）

注意 : webpack 基于 node, 所以导出 , 遵守 CommonJS 规范
3.4 yarn build执行流程图

注意: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

webpack%E6%8F%92%E4%BB%B6%E5%92%8Cloader">4. webpack插件和loader

webpack-plugin%20%E6%8F%92%E4%BB%B6">4.1 自动生成html - html-webpack-plugin 插件
1. html-webpack-plugin 这个插件的作用？ （webpack插件）
打包后，会帮我们 自动 将 public/index.html 拷贝到 dist 下，且会 自动引入 打包后的文件
2. html-webpack-plugin 插件怎么使用？
配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/
（1）下载插件
        yarn add html-webpack-plugin -D
（2）导入插件 (webpack.config.js)
        // 引入自动生成 html 的插件
        const HtmlWebpackPlugin = require('html-webpack-plugin')
（3）配置插件 (webpack.config.js)
        plugins: [
           new HtmlWebpackPlugin({ template: './public/index.html' })
        ]
webpack%E5%A4%84%E7%90%86css%E6%96%87%E4%BB%B6%20-%20css-loader" style="background-color:transparent;">4.2 webpack处理css文件 - css-loader

举例：现在页面包含了 html 和 js，但是没有 css ，希望添加一点css，处理掉小圆点样式

目标：编写css代码，去掉小圆点，让webpack打包处理

  1.  新建 - src/css/index.css
  2.  编写去除li圆点样式代码
  3.  (重要) 一定要引入到入口才会被webpack打包
  4.  执行打包命令观察效果

​​​​​​​报错: 因为webpack默认只能处理js文件

css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
style-loader文档: https://webpack.docschina.org/loaders/style-loade/
编写css文件代码src/css/index.css，在main.js中导入，打包运行，会发现报错了：

原因：
        webpack默认只认识 js 文件和 json文件 ！不认识 css 文件，如果要打包处理 js 之外的静态资源，需要配置 loader 来加载预处理文件
明确：要加载处理 css => 需要配置对应的 loader => css-loader
配置 css-loader 的步骤：
1. 安装依赖 yarn add style-loader css-loader -D
2. 配置内容

webpack%E5%A4%84%E7%90%86%20less%20%E6%96%87%E4%BB%B6%20-%20less-loader">4.3 webpack处理 less 文件 - less-loader
目标：编写 less 代码，让webpack打包处理 less (需要配置 less-loader)
less-loader文档: https://webpack.docschina.org/loaders/less-loader/
配置 less-loader 的步骤：
  1. 新建src/less/index.less – 设置li字体大小
  2. 把index.less引入到入口文件
  3. 安装依赖 yarn add less less-loader -D
  4. 配置内容（针对less配置）
  5. 打包观察效果

webpack%E5%A4%84%E7%90%86%E5%9B%BE%E7%89%87-%E5%86%85%E7%BD%AEasset%E6%A8%A1%E5%9D%97" style="background-color:transparent;">4.4 webpack处理图片 - 内置asset模块
  1. 在src/assets/准备图片文件
  2. 在index.less对body设置背景图片
  3. 在入口导入图片文件, 设置到img标签插入到body
  4. 打包观察效果

报错: 因为webpack无法自己处理图片文件

如果要 解析图片等资源 ，需要用到 webpack 5 内置的 asset 资源处理模块， 已集成，无需安装。
官网地址： https://webpack.docschina.org/guides/asset-modules/
配置 rules 内容：

注意：
（1）对于小于 8k 的图片， 会自动转 base64 字符串 （节约请求次数，成本：放大约30%的图片体积大小）
（2）对于大于 8k 的图片， 会生成单独文件引入 。
配置图片的打包输出目录：
（默认是直接输出到了 dist 根目录, 可以通过 generator 进行配置）

webpack%E5%A4%84%E7%90%86%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87-%E5%86%85%E7%BD%AEasset%E6%A8%A1%E5%9D%97" style="background-color:transparent;">4.5 webpack处理字体图标 - 内置asset模块
  1. src/assets 下 放入fonts字体相关文件夹(素材里)
  2. src/main.js 引入 assets/fonts/iconfont.css
  3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上
  4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
  5. 打包后运行网页观察效果

字体图标 和 图片的配置一致，也是用内置的asset模块处理（同样：目录可以通过 generator 进行配置）

webpack%E5%A4%84%E7%90%86%E9%AB%98%E7%89%88%E6%9C%AC%E8%AF%AD%E6%B3%95-babel%E8%AF%AD%E6%B3%95%E9%99%8D%E7%BA%A7" style="background-color:transparent;">4.6 webpack处理高版本语法 - babel语法降级
es6新版本的语法很好用 ，例如：let，const，箭头函数...，但是， es6新版本语法是有兼容性的 。
如果想用高版本的新语法怎么办  => babel语法降级
babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/
babel: 一个javascript编译器, 把 高版本js语法 降级处理 输出兼容的 低版本语法
babel-loader: 可以让webpack转译打包的js代码
步骤：
  1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
  2. 安装包：yarn add -D babel-loader @babel/core @babel/preset-env
  3. 配置规则

webpack%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%85%8D%E7%BD%AE">5. webpack开发服务器配置

webpack-%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8">5.1 webpack-开发服务器
问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 比较费时
原因:
  • 从0构建依赖
  • 从电脑磁盘，读取对应的文件到内存, webpack开始加载
  • 再用对应的 loader 进行处理
  • 将处理完的内容, 输出到电脑磁盘，指定目录
解决:
         起一个开发服务器 , 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用
webpack开发服务器：把代码运行在 内存 中, 保存自动更新 , 实时 返回给浏览器显示
使用步骤：
1. 下载： yarn add webpack-dev-server -D
2. package.json 配置scripts

3. 启动服务器开发： yarn serve
webpack-%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8-%E7%AB%AF%E5%8F%A3%E5%8F%B7%E9%85%8D%E7%BD%AE">5.2 webpack-开发服务器-端口号配置
webpack-dev-server配置文档:
https://webpack.docschina.org/configuration/dev-server/#devserverafter
1. 在webpack.config.js中添加如下配置即可

2. 重新启动webpack开发服务器观察效果


http://www.ppmy.cn/news/1448080.html

相关文章

移植 SquareLine 导出的 UI 源码到 HMI-Board

移植 SquareLine 导出的 UI 源码到 HMI-Board

目录 准备工具创建 HMI 工程设计 UIUI 移植板级验证更多内容 HMI-Board 为 RT-Thread 联合瑞萨推出的高性价比图形评估套件，取代传统的 HMI 主控板 硬件，一套硬件即可实现 HMI IoT 控制 的全套能力。依托于瑞萨高性能芯片 RA6M3 及 RT-Thread 软件生态…
阅读更多...
MATLAB | 全网唯一！使用MATLAB绘制各类螺旋图

MATLAB | 全网唯一！使用MATLAB绘制各类螺旋图

全网唯一，MATLAB绘制各类螺旋图，还在为X轴过长而困扰吗？把X轴盘起来就可以优雅的绘图！！今天带来的是由本人开发的SSpiral MATLAB 工具包，，本期工具函数绘图效果： 工具函数放在最后&a…
阅读更多...
GoLang Gin实际使用

GoLang Gin实际使用

所有代码同步到Admin/gitDemo - Gitee.comhttps://gitee.com/mec-deployment-team_0/git-demo/tree/dev/ 1.创建Gin框架 一般设计一个常规的web项目，都需要以下几个模块 runApp 主函数，运行整个项目routes 路由控制，管理跳转以及路由分组co…
阅读更多...
windows编程中的位图操作，界面中插入位图方法

windows编程中的位图操作，界面中插入位图方法

在界面中插入位图，主要用到BitBlt这个函数 BOOL CDC::BitBlt(int x, int y, int width, int height, CDC *src, int src_x, int src_y, DWORD dwRop)用法说明见官方说明 这里要注意的是，这个函数是把源图像从src这个设备上下文传递到目标设备上下文(这…
阅读更多...
【类型商店】字符字符串（上）

【类型商店】字符字符串（上）

啊，哈喽，小伙伴们大家好。我是#Y清墨，今天呐，我要介绍的是字符与字符串。 导语 在我之前发的[算法材料包]C数字拆分里有提及到.size()和length()和strlen(),想看更多内容请别划走！ 一.论字符 （1&#xff…
阅读更多...
Java面试题：解释堆和栈的OutOfMemoryError通常在什么情况下会发生

Java面试题：解释堆和栈的OutOfMemoryError通常在什么情况下会发生

在Java中，OutOfMemoryError（OOM）是一个运行时错误，它表明Java虚拟机（JVM）在尝试分配内存时无法找到足够的空间。这个错误可能发生在堆内存或栈内存耗尽时。以下是一些常见的导致OutOfMemoryError的情况&…
阅读更多...
第三章：信息系统基础知识之信息系统概述

第三章：信息系统基础知识之信息系统概述

信息系统概述 信息系统(Information System，IS)一般泛指收集、存储、处理和传播各种信息的具有完整功能的集合体。现代信息系统总是与计算机技术和互联网技术的应用联系在一起，主要是指以计算机为信息处理工具，以网络为信息传输手段的信息系统…
阅读更多...
【FastGPT 】FastGPT 的知识库逻辑

【FastGPT 】FastGPT 的知识库逻辑

这里写自定义目录标题 FastGPT 的知识库逻辑FastGPT 的知识库检索机制FastGPT 的知识库逻辑 FastGPT的知识库逻辑主要围绕“向量搜索 + 大模型 = 知识库问答”的公式展开。以下是关于FastGPT知识库逻辑的一些关键点： 基础概念： 向量：将人类的语言（文字、图片、视频等）转换…
阅读更多...
最新文章

Copyright @ 2022~2023