前端构建工具 webpack 笔记

  • 1、了解 webpack 

1、定义:本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具,当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所程序时,需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

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

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

        1)把 less / sass 转成 css 代码

        2)把 ES6+ 降级成 ES5

        3)支持多种模块标准语法

4、问题:为何不学 vite ?

        因为:很多项目还是基于 Webpack 构建,并为 Vue React 脚手架使用做铺垫!


  • 2、使用 webpack

1、需求:封装 utils 包,校验手机号长度和验证码长度,在 src/index.js 中使用并打包观察

2、步骤:

        1)新建并初始化项目,编写业务源代码

1、创建包管理文件:package.jsonnpm init -y2、编写业务代码 

        2)下载 webpack webpack-cli 到当前项目中(版本独立),并配置局部自定义命令

    Webpack是一个功能强大的模块打包工具,而Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具。它们通常一起使用,以便更好地管理和构建前端项目。1、终端:npm i webpack webpack-cli --save-dev2、package.json:  [我们自定义一个命令 build,但是最终执行的是 webpack]"scripts": {"build":"webpack"}

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

    执行我们定义的命令,即执行了 webpack ,进行打包npm run build


  • 3、修改 Webpack 打包出入口

webpack 官方文档:概念 | webpack 中文文档 (docschina.org) 

1)项目根目录,新建 webpack.config.js 配置文件

2)导出配置对象,配置入口,出口文件的路径

1、下面是引入 path 模块 ,path.resolve作用是,把下面 __dirname (可得到当前绝对路径) 和后面的字符串,拼接成一个绝对路径

2、entry:配置需要打包文件的文件路径

3、output:配置打包后文件的存储显示路径

        1)这里的path.resolve第二参数是打包后输出的文件夹名称

        2)filename:配置打包后的文件名

        3)clean: true  生成打包后内容之前,清空原有的输出目录【和filename同位置】

3)重新打包观察 注意:只有和入口产生直接/间接的引入关系,才会被打包

执行命令,npm run build,最后输出如下图框中

4)打包后的 js 文件,例子如下【我用了自动换行,让你们看清楚】


  • 4、webpack 打包输出 index.html 文件

注意:前面我们打包的都是 js 文件,那么 html 文件怎么打包到 dist 文件夹里面呢?

官方网址指向HtmlWebpackPlugin | webpack 中文文档 (docschina.org)

1)安装对应的包

    npm install html-webpack-plugin --save-dev

2)在 webpack.config.js 中配置

3)重新打包观察

执行命令,npm run build,最后输出如下图框中

 4)打包后的 html 文件,例子如下【我用了自动换行,让你们看清楚】


  • 5、webpack 打包 css 代码 【js 文件中】

1、和 打包 html 文件一样,我们需要下载对应的包,用于 打包 该文件 到 【js 文件中】

        1)加载器 css-loader:解析 css 代码

        2)加载器 style-loader:把解析后的 css 代码插入到 DOM

2、注意:Webpack 默认只识别 js 代码

3、官方网址指向:

css-loader | webpack 中文文档 (docschina.org)

style-loader | webpack 中文文档 (docschina.org)

1)准备 css 文件代码引入到 src 文件夹中

2)准备 css 代码,并引入到 js 中 【没错,就是引入 js 文件中】

2)下载 css-loader 和 style-loader 本地软件包

  同时,下载两个加载器npm i css-loader style-loader --save-dev

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

module.exports = {module: {rules: [{// 匹配 css 文件,/i 就是 无论后缀大小写test: /\.css$/i,// 使用 这两个加载器,注意,它是从最后一个元素【这里是css-loader】开始使用,顺序不能改变use: ["style-loader", "css-loader"],},],},
};

4)重新打包观察

执行命令,npm run build,最后输出如下图框中【注意,下面是 js 文件】

最后 打包后页面 和 打包前页面 展示 一样


  • 6、webpack 打包 css 代码【css 文件中】

 1、下载对应的包,用于 打包 该文件 到【独立的 css 文件中】

        1)加载器 css-loader:解析 css 代码

        2)插件 mini-css-extract-plugin:提取 css 代码 【webpack5 才有】

2、注意:【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、好处:css 文件可以被浏览器缓存,减少 js 文件体积

4、官方网址指向:

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)

1、下载 mini-css-extract-plugin 本地软件包

    npm install mini-css-extract-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/i,// 注意:style-loader 和 MiniCssExtractPlugin.loader 不能同时使用// use: ['style-loader', "css-loader"],use: [MiniCssExtractPlugin.loader, "css-loader"],},],},
};

3、打包后观察效果

注意:执行命令,npm run build,这里 打包后 的 css 代码,还没有被压缩


  • 7、webpack 打包 css 代码【压缩 css 代码】

 1、下载对应的包,用于 打包 该文件 到【独立的 css 文件中】

        1)加载器 css-loader:解析 css 代码

        2)mini-css-extract-plugin:提取 css 代码 【webpack5 才有】

        3)css-minimizer-webpack-plugin :压缩 css 代码

2、注意:【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、好处:css 文件可以被浏览器缓存,减少 js 文件体积

4、官方网址指向:

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)​​​​​​

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)  【这个是生产模式压缩】

1、下载 css-minimizer-webpack-plugin 本地软件包

    npm install css-minimizer-webpack-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, "css-loader"],},],},optimization: {minimizer: [// 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`)`...`, // 保留这个,就是使 js 代码打包后,还能压缩new CssMinimizerPlugin(),],}
};;

3、打包后观察效果

 注意:执行命令,npm run build,这里的 css 代码已经被压缩了


  • 8、webpack 打包 less 代码

 1、下载对应的包,用于 打包 该文件

        1)加载器 css-loader:解析 css 代码

        2)mini-css-extract-plugin:提取 css 代码 

        3)less less-loader:下载 less 和 less-loader 包

2、注意:【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、官方网址指向:

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)​​​​​​

less-loader | webpack 中文文档 (docschina.org)

1、下载 less less-loader 本地软件包

     npm install less less-loader --save-dev

2、新建 less 代码(设置背景图)并引入到 index.js 中 

3、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /\.less$/i,use: [MiniCssExtractPlugin.loade,'css-loader','less-loader',],},],},
};

4、打包后观察效果

 注意:执行命令,npm run build,因为用了mini-css-extract-plugin,最后,这段代码打包后,在输出的 css 文件中【注意:图片所在的文件夹也被打包到 dist 文件夹里面了】


  • 9、webpack 打包图片

资源模块:Webpack5 内置资源模块(字体,图片等)打包,无需额外 loader,无需下载包

官方网址指向:资源模块 | webpack 中文文档 (docschina.org)

1、配置 webpack.config.js 让 Webpack 拥有打包图片功能

  • 这个规则的作用是匹配以 .png.jpg.jpeg.gif 结尾的文件,并使用 asset 模块类型进行处理。
  • asset 模块类型是 webpack 5 引入的一种处理资源的方式,它会根据文件大小,自动决定是将文件转换为 Data URL (DataURL),还是将其复制到输出目录。 

1)占位符 【hash】对模块内容做算法计算,得到映射的数字字母组合的字符串

2)占位符 【ext】使用当前模块原本的占位符,例如:.png / .jpg 等字符串

3)占位符 【query】保留引入文件时代码中查询参数(只有 URL 下生效)

module.exports = {plugins: [new MiniCssExtractPlugin()],module: {rules: [...{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',generator: {filename: 'assets/[hash][ext][query]'}}],},
};

2、打包后观察效果和区别

注意:判断临界值默认为 8KB

1)大于 8KB 文件:发送一个单独的文件并导出 URL 地址【打包输出图片】

2)小于 8KB 文件:导出一个 data URI(base64字符串)【打包后转为base64字符串】


  • 10、webpack 搭建开发环境

  • 问题:之前改代码,需重新打包才能运行查看,效率很低
  • 开发环境:配置 webpack-dev-server 快速开发应用程序
  • 作用:启动 Web 服务,自动检测代码变化,热更新到网页
  • 注意:dist 目录和打包内容是在内存里(更新快)【并非打包到根目录下
  • 官网地址指向:开发环境 | webpack 中文文档 (docschina.org)

1、下载 webpack-dev-server 软件包到当前项目

    npm i webpack-dev-server--save-dev

2、设置模式为开发模式,并配置自定义命令

3、使用 npm run dev 来启动开发服务器,试试热更新效果

  • 11、webpack 的 打包模式

打包模式:告知 Webpack 使用相应模式的内置优化

1、在 webpack.config.js 配置文件设置 mode 选项

2、在 package.json 命令行设置 mode 参数 

注意:命令行设置的 优先级 高于 配置文件中的,推荐用命令行设置 


  • 12、webpack 打包模式的应用

需求:在开发模式下用 style-loader 内嵌更快,在生产模式下提取 css 代码

方案1:webpack.config.js 配置导出函数,但是局限性大(只接受 2 种模式)

方案2:借助 cross-env (跨平台通用)包命令,设置参数区分环境

1、下载 cross-env 软件包到当前项目

    npm i cross-env --save-dev

2、配置自定义命令,传入参数名和值(会绑定到 process.env 对象下)

当你运行对应命令 npm run build 或者dev 时,根据 pageage.json 的 NODE_ENV=??,执行cross-env :固定NODE_ENV=production  :自定义的,也可以直接写 a=b,但是为了语义化点

3、在 webpack.config.js 区分不同环境使用不同配置 

process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loaderprocess.env :固定的,通过这个调用 我们定义的值


  • 13、前端-注入环境变量 

  • 需求:前端项目中 index.js 中,开发模式下打印语句生效,生产模式下打印语句失效
  • 问题:cross-env 设置的只在 Node.js 环境生效,前端代码无法访问 process.env.NODE_ENV
  • 解决:使用 Webpack 内置的 DefinePlugin 插件
  • 作用:在编译时,将前端代码中匹配的变量名,替换为值或表达式

plugins: [new webpack.DefinePlugin({// 就是,在 前端项目 某个js文件 中,遇见 process.env.NODE_ENV 就赋值 给 模式对应的值'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})],

测试的结果:


  • 14、开发环境调错 - source map

  • 问题:代码被压缩和混淆,无法正确定位源代码位置(行数和列数)
  • source map可以准确追踪 error 和 warning 在原始代码的位置
  • 设置:webpack.config.js 配置 devtool 选项
  • inline-source-map 选项:把源码的位置信息一起打包在 js 文件内
  • 注意:source map 仅适于开发环境不要在生产环境使用(防止被轻易看源码位置)
  • 官网网址指向:Devtool | webpack 中文文档 (docschina.org)
const config = {...
}// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {config.devtool = 'inline-source-map'
}module.exports = config

解决方法:下载 cross-env 软件包,根据 pageage.json 中设置的 环境变量,判断当前启动的是生产模式,还是开发模式


  • 15、解析别名 alias 【用 @ 来代表 src 绝对路径】

  • 解析别名:配置模块如何解析,创建 import 引入路径的别名,来确保模块引入变得更简单
  • 例如:原来路径如图,比较长而且相对路径不安全
  • 解决:在 webpack.config.js 中配置解析别名 @ 来代表 src 绝对路径
  • 官网网址指向:webpack 中文文档 (docschina.org)

module.exports = {//...resolve: {// __dirname 获取的是 webpack.config.js 所在文件夹的绝对路径'@': path.resolve(__dirname, 'src')},
};

  • 16、开发模式使用 npm 下载包 || 生产模式使用 CDN 引用

  • CDN定义:内容分发网络,指的是一组分布在各个地区的服务器
  • 作用:把静态资源文件/第三方库放在 CDN 网络中各个服务器中,供用户就近请求获取
  • 好处:减轻自己服务器请求压力,就近请求物理延迟低,配套缓存策略
  • cdn 引入网址:BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

需求:开发模式使用本地第三方库,生产模式下使用 CDN 加载引入 

1、在 html 中引入第三方库的 CDN 地址 并用模板语法判断

下面这个是 htmlWebpackPlugin 规定的用法,我们后面在 options 定义 useCdn 的值 判断就行<% if(htmlWebpackPlugin.options.useCdn){ %><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"><% } %>

2、配置 webpack.config.js 中 externals 外部扩展选项(防止某些 import 的包被打包

const config = {plugins: [new HtmlWebpackPlugin({useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址}),]
}// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {// 外部扩展(让 webpack 防止 import 的包被打包进来)config.externals = {// key:import from 语句后面的字符串// value:留在原地的全局变量(最好和 cdn 在全局暴露的变量一致)'bootstrap/dist/css/bootstrap.min.css': 'bootstrap','axios': 'axios',}
}module.exports = config

3、两种模式下打包观察效果 


  • 17、webpack 多页面打包

 多页面:多个 html 文件,切换页面实现不同业务逻辑展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/131764.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【javaSE】 反射与反射的使用

文章目录 &#x1f332;反射的定义&#x1f38d;反射的用途&#x1f334;反射基本信息&#x1f340;反射相关的类&#x1f6a9;Class类(反射机制的起源 )&#x1f388;Class类中的相关方法 &#x1f6a9;反射示例&#x1f388;获得Class对象的三种方式&#x1f388;反射的使用 …

Activating More Pixels in Image Super-Resolution Transformer(HAT)超分

摘要 基于Transformer的方法在低级视觉任务&#xff08;如图像超分辨率&#xff09;上表现出令人印象深刻的性能。然而&#xff0c;我们发现这些网络只能通过归因分析利用有限的输入信息空间范围。这意味着Transformer的潜力在现有网络中仍未得到充分利用。为了激活更多输入像…

Spring 的创建和日志框架的整合

目录 一、第一个 Spring 项目 1、配置环境 2、Spring 的 jar 包 Maven 项目导入 jar 包和设置国内源的方法&#xff1a; 3、Spring 的配置文件 4、Spring 的核心 API ApplicationContext 4、程序开发 5、细节分析 &#xff08;1&#xff09;名词解释 &#xff08;2&…

uboot 顶层Makefile-make xxx_deconfig过程说明三

一. uboot 的 make xxx_deconfig配置 本文接上一篇文章的内容。地址如下&#xff1a;uboot 顶层Makefile-make xxx_deconfig过程说明二_凌肖战的博客-CSDN博客 本文继续来学习 uboot 源码在执行 make xxx_deconfig 这个配置过程中&#xff0c;顶层 Makefile有关的执行思路。 …

STM32纯中断方式发送接收数据(串行通信;keil arm5;)

除了main文件其他文件均无修改&#xff0c;正常运行--在keil arm5内

AJAX学习笔记9 搜索联想自动补全

AJAX学习笔记8 跨域问题及解决方案_biubiubiu0706的博客-CSDN博客 其实就一个功能 搜索联想 自动补全 键盘按下事件keydown 键盘弹起事件keyup 做模糊查询 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…

第9节-PhotoShop基础课程-移动抓手缩放工具

文章目录 前言1. 移动工具1.移动工具1.自动选择&#xff08;图层和组&#xff09;2.显示变换控件 &#xff08;Shift 变换/ Ctrl 变换&#xff09;3.自由变换 Ctrl T &#xff08;Shift 变换/ Ctrl 变换&#xff09;4.对齐功能 2.画板工具 V1. 创建画板并作图2.导出画板 2.路…

59、SpringBoot 自定义JSON的序列化器和反序列化器

Serialization(序列化)&#xff1a; 将java对象以一连串的字节码保存在磁盘文件中的过程&#xff0c;也可以说是保存java对象状态的过程。序列化可以将数据永久保存在磁盘上(通常保存在文件中)。 deserialization(反序列化)&#xff1a; 将保存在磁盘文件中的java字节码重新转…

Jmx协议远程连接java服务器

注意&#xff1a;本例里&#xff0c;我用的是jdk17 通常用jdk自带的jconsole&#xff0c;或者想要功能强大点的使用visualVM 需要java服务器在启动的时候加上以下参数 -Dcom.sun.management.jmxremote 启用jxm远程连接-Djava.rmi.server.hostname10.1.3.99 指定jxm监听地址&…

python 自(1)定义变量 数据类型 判断数据类型 转换数据类型 算数运算符 复合运算符 比较运算符 逻辑运算符 赋值运算符

注释 # 注释 就是一个 # 也可以 ctrl / 也可以出来注释 命名规范 # 标识符 由字母 下划线 数字 组成 数字不能开头 # 不可以使用 关键字 # 严格区分大小写 定义变量 # 变量定义 重复利用 # 例如 cons 你好小周 print(cons) print(cons)print("你好小周") #这…

【经典小练习】JavaSE—拷贝文件夹

&#x1f38a;专栏【Java小练习】 &#x1f354;喜欢的诗句&#xff1a;天行健&#xff0c;君子以自强不息。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f384;效果&#x1f33a;代码&#x1f6f8;讲解&#x…

每日一题 2596. 检查骑士巡视方案

难度&#xff1a;中等 很简单&#xff0c;从第 0 步开始模拟即可&#xff0c;唯一sb的就是测试用例中如果&#xff08;0&#xff0c;0&#xff09;处不为0的话就直接false&#xff0c;而不是去找0在哪 我的代码&#xff1a; class Solution:def checkValidGrid(self, grid: L…

【PowerQuery】Excel的PowerQuery的复制

在Excel中构建符合要求的PowerQuery连接之后&#xff0c;所有的PowerQuery 连接已经顺利的保存在Excel 工作簿当中&#xff0c;但是如何去查看已经保存的PowerQuery连接呢&#xff1f;图6.3 显示了查看PowerQuery连接。 Excel界面->数据页签->查询与连接 如果你的Power…

python求解一维弦振动方程

1、一维弦振动方程 2、差分公式及求解 import numpy as np import matplotlib.pyplot as plt l1 #长度 nx 101 #x方向网格节点数量 dx l/(nx-1) #空间网格步长 t6 #总时间 dt 0.01 # 时间步长 t_setnp.array([0.00,0.10,0.20,0.30,0.40,0.50,0.60]) #需要观察的时…

GO语言篇之发布开源软件包

GO语言篇之发布开源软件包 文章目录 GO语言篇之发布开源软件包新建仓库拉取到本地初始化项目编写代码提交代码发布引用软件包 我们写GO语言程序的时候难免会引用第三方的软件包&#xff0c;那么你知道别人是怎么发布自己的软件包吗&#xff0c;别急&#xff0c;这篇博客教你怎么…

如何使用 Node.js和Express搭建服务器?

如何使用NodeJs搭建服务器 1. 准备工作1.1 安装Node.js 2. 安装express2.1 初始化package.json2.2 安装express2.3 Express 应用程序生成器 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段…

geohash学习

geohash编解码 import ("github.com/mmcloughlin/geohash" )func Test_Demo(t *testing.T) {// 编码经纬度到 geohash 字符串lat, lon : 40.7128, -74.0060 // 纽约市的位置geoHash : geohash.Encode(lat, lon) // geohash 字符串fmt.Println(geoHash) …

Spring WebFlux详解

Spring 框架中包含的原始 Web 框架 Spring Web MVC 是专门为 Servlet API 和 Servlet 容器而设计的。后来在 5.0 版本中加入了 reactive 栈的 Web 框架 Spring WebFlux。它是完全非阻塞的&#xff0c;支持 Reactive Streams 背压&#xff0c;并在 Netty、Undertow 和 Servlet 容…

lv4 嵌入式开发-1 Linux文件IO

目录 1 文件的概念和类型 2 如何理解标准IO 3 流(FILE)的含义 3.1 流 3.2 文本流和二进制流 3.3 流的缓冲类型 4 小结 5 缓存区实验 1 文件的概念和类型 概念&#xff1a;一组相关数据的有序集合 文件类型&#xff1a; 常规文件 r 目录文件 d 字符设备文件 …

一键部署k8s集群

前置动作 关闭防火墙 systemctl disable firewalld && systemctl stop firewalld 关闭SELinux sed -i s#SELINUXenforcing#SELINUXdisabled#g /etc/selinux/config && grep SELINUXdisabled /etc/selinux/config setenforce 0 getenforce 关闭swap # 关闭…