【前端】Webpack5中Html和CSS的压缩打包

1.Webpack5简介

1.1.Webpack简介

在这里插入图片描述

（1）webpack的发展历程

  • 2012.3—webpack（问世）

  • 2014.2—webpack1

  • 2016.12—webpack2

  • 2017.6—webpack3

  • 2018.2—webpack4

  • 2020.10—webpack5（要求node版本10.13+）

（2）什么是webpack

  • webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具

  • 静态模块

    • 模块化开发，避免重复代码、 逻辑，提高开发效率

  • 打包

    • 将各个模块，按照一定的规则组装起来

在这里插入图片描述

  • 将多个不同类型文件打包
  • 编译代码，确保浏览器能解析
  • 对代码进行压缩，减少文件体积，提高加载速度
  • 对源代码进行格式化校验
  • 有热更新功能，提高开发效率
  • 不同环境，提供不同的打包策略
1.2.Webpack五个核心配置

（1）入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph)的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。

在这里插入图片描述

（2）输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

在这里插入图片描述

（3）加载器（Loader）

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中，loader 有两个属性：

  • test 属性，识别出哪些文件会被转换。
  • use 属性，定义出在进行转换时，应该使用哪个 loader。

在这里插入图片描述

（4）插件（plugin）

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

在这里插入图片描述

（5）模式（mode）

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

在这里插入图片描述

1.3.webpack初体验

（1）初始化项目

cnpm init -y

（2）安装webpack

cnpm i webpack webpack-cli -D

（3）创建入口文件

在这里插入图片描述

console.log('hello webpack');

（4）打包，指定mode

webpack ./js/index.js -o ./dist --mode=development

在这里插入图片描述

2.HTML、CSS资源打包

2.1.理解webpack配置文件

（1）webpack配置文件的作用

  • 简化命令行的选项

  • 默认配置文件名称为webpack.config.js

  • 操作webpack大部分都是在配置webpack.config.js文件

（2）配置详情

  • mode（模式）
// 打包模式配置
mode: 'development',
  • entry（入口）
// 入口文件配置
entry: './src/index.js',
  • output（出口）
const { resolve } = require('path');// 出口文件配置
output: {// 所有输出文件的目标路径，必须是绝对路径path: path.resolve(__dirname, 'dist'),// 出口文件名配置filename: "bundle.js",
},
  • module（模块-loader配置）
// 模块配置
module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）],
},
  • devServer（用于快速开发应用程序）
// 开发服务器
devServer: {},
  • plugin（插件）
// 插件配置
plugins: [],

创建webpack.config.js配置文件

const { resolve } = require("path");module.exports = {// 打包模式配置mode: "development",// 入口文件配置entry: "./js/index.js",// 出口文件配置output: {// 所有输出文件的目标路径，必须是绝对路径path:resolve(__dirname, "dist"),// 出口文件名配置filename: "main.js",},// 模块配置module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）],},// 开发服务器devServer: {},// 插件配置plugins: [],
};

执行命令

npm run build

在这里插入图片描述

2.2.自动生成HTML文件和指定模板

自动生成HTML文件（html-webpack-plugin）,该插件可以生成一个 HTML 文件，并在HTML中加载所有打包资源，便于服务器访问。

（1）安装

cnpm i html-webpack-plugin -D

（2）在webpack.config.js中引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

（3）webpack.config.js配置plugins

plugins: [new HtmlWebpackPlugin(),
],

执行 npm run build

在这里插入图片描述

指定生成HTML模板

（1）新建HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body></body>
</html>

注意title这块要用EJS语法，是JS的模板引擎。

（2）配置plugins

plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  //指定 html 模板filename:'index.html',				//指定 html 名称title:'hello webpack'					//指定 html title}),
],

执行 npm run build

在这里插入图片描述

2.3.打包多个HTML页面和压缩

（1）打包多个HTML页面

plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  filename:'one.html',				title:'第一个'					}),new HtmlWebpackPlugin({template:'./html/index.html',  filename:'two.html',				title:'第二个'					}),
],

在这里插入图片描述

（2）压缩html

  plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  filename:'index.html',				title:'index',minify: {collapseWhitespace: true,  // 清除空格换行removeComments: true,			 // 清除注释}, 				})],

在这里插入图片描述

2.4.CSS文件打包原理

打包css文件需要两个loader：

  • css-loader

    • 将css代码转化为js代码，合并到打包后的js文件中。

  • style-loader

    • 将包含css内容的js代码，插入到html中style标签中。

（1）安装css-loader和style-loader

cnpm i css-loader style-loader -D

（2）将创建的css文件引入到js文件中

创建css文件

.d1{background-color: cadetblue;
}//html 中 加入一个div元素<div class="d1">我是李祥</div>

import './css/main.css'
console.log('hello webpack');

（3）webpack.config.js配置module

// 模块配置
module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）{// 匹配css文件test: /\.css$/i,// 指定加载器，加载顺序是从左到右或者是从下到上use: ['style-loader', 'css-loader'],},],
},

在这里插入图片描述

2.5.将CSS代码抽离成单独文件

CSS代码抽离成单独文件的作用：

  • 从js文件中抽离出css代码，减少js文件体积
  • 当js文件比较庞大时，可以避免阻碍页面的渲染
  • 提高渲染速度

将CSS代码抽离成单独文件的插件mini-css-extract-plugin

（1）安装mini-css-extract-plugin

cnpm i mini-css-extract-plugin -D

（2）webpack.config.js引入

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

（3）loader配置（替换style-loader）

use:[MiniCssExtractPlugin.loader,'css-loader']

（4）实例化插件

new MiniCssExtractPlugin({filename:'./css/main.css'
})

在这里插入图片描述

2.6.打包CSS预编译语言

（1）安装css预编译语言插件

  • less
cnpm install less less-loader -D
  • sass
cnpm install node-sass sass-loader -D
  • stylus
cnpm install stylus stylus-loader -D

（2）同样js引入less文件，webpack配置文件中配置规则

 // 模块配置
module: {rules: [{test: /\.less$/i,use: ['style-loader', 'css-loader', 'less-loader'],},],
},
2.7.CSS样式添加兼容前缀

（1）安装插件

cnpm i postcss-loader autoprefixer -D

（2）配置

  • webpack.config.js

    use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'   // 处理css兼容
]

  • postcss.config.js

    module.exports = {plugins: [require('autoprefixer')], // 添加浏览器前缀
};

  • package.json

    "browserslist":["last 2 version",   // 兼容浏览器的最近两个版本"> 1%"							// 全球占有率超过1%的浏览器
]

作用：让特殊的css样式兼容各个浏览器

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

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

相关文章

Visual Studio Professional 2019 软件安装教程（附安装包下载）

Visual Studio Professional 2019 软件安装教程（附安装包下载）

Microsoft Visual Studio 是一个非常强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;适用于 Windows 上的 .NET 和 C 开发人员。它提供了一系列丰富的工具和功能&#xff0c;可以提升和增强软件开发的每个阶段。 Visual Studio IDE 是一个创意启动板&#xff0c;可…
阅读更多...
uniapp中 background-image 设置背景图片不展示问题

uniapp中 background-image 设置背景图片不展示问题

有问题 <view class"file-picker__box jsz" tap"jszxszUpload(jsz)"></view>.jsz {background-image: url(../../static/example_drive.png); }解决1 <view class"file-picker__box jsz" :style"{ background-image: url(…
阅读更多...
JS小数运算精度丢失的问题

JS小数运算精度丢失的问题

工作中会不会经常会碰到一些数据指标的计算&#xff0c;比如百分比转化&#xff0c;保留几位小数等&#xff0c;就会出现计算不准确&#xff0c;数据精度丢失的情况。通过这篇分享借助第三方库能够轻松解决数据精度丢失的问题。 一、场景复现 JS数字精度丢失的一些常见问题 /…
阅读更多...
SpringBoot+SpringMVC+MybatisPlus

SpringBoot+SpringMVC+MybatisPlus

文章目录 SpringBootSpringMVCMybatisPlus怎样在SpringBoot中引入SpringMVC?首先看下引入的依赖创建数据库表创建DO类创建MyBatisPlus动态代理接口创建controller控制器接收http请求创建SpringBoot配置文件application.yml最后创建启动类 SpringBootSpringMVCMybatisPlus 怎样…
阅读更多...
cuda卸载

cuda卸载

去查看你的电脑显卡对应的cuda版本&#xff0c;不然还是一整个用不到gpu的情况嘿嘿. 啊啊啊啊打开控制面板看一下&#xff0c;驱动不要乱卸载&#xff1a; 这些东西不能全部卸载了哦&#xff0c;只能卸载含有“CUDA”的那几个&#xff08;其实其他的可能也没有用 但是不懂的哇 …
阅读更多...
关于路由转发

关于路由转发

路由表的作用 路由表的作用&#xff1a;目标网络匹配路由表&#xff0c;从相应网络转发&#xff1b;不匹配路由表&#xff0c;丢弃或转发至默认路由器。 路由转发的原理 根据IP地址找到目标网络&#xff0c;由应路由器解封装查看目标网络是否可达&#xff0c;重新封装进行转…
阅读更多...
Axure 9 使用 font awesome 字体发布原型

Axure 9 使用 font awesome 字体发布原型

我使用的版本为Font awesome 6.1.1&#xff0c;安装后在axure中新增3个字体 如果直接发布&#xff0c;在没有安装Font awesome的电脑上无法正常显示字体图标&#xff0c;需要在发布前进行设置。 设置方法&#xff1a; 点击共享 点开设置 在字体设置页&#xff0c;填入图中所示…
阅读更多...
FreeRTOS 消息队列 详解

FreeRTOS 消息队列 详解

目录 什么是队列&#xff1f; 消息队列特点 1. 数据入队出队方式 2. 数据传递方式 3. 多任务访问 4. 出队、入队阻塞 消息队列相关 API 函数 1. 创建队列 2. 写队列 3. 读队列 消息队列实操 什么是队列&#xff1f; 队列又称消息队列&#xff0c;是一种常用于任务间…
阅读更多...
创建 Edge 浏览器扩展教程（下）

创建 Edge 浏览器扩展教程（下）

创建 Edge 浏览器扩展教程&#xff08;下&#xff09; 创建扩展教程&#xff0c;第 2 部分1&#xff1a;更新弹出窗口.html以包含按钮2&#xff1a;更新弹出窗口.html在浏览器选项卡顶部显示图像3&#xff1a;创建弹出式 JavaScript 以发送消息4&#xff1a;从任何浏览器选项卡…
阅读更多...
全国三维数字化创新设计大赛湖北赛区省赛成功举办

全国三维数字化创新设计大赛湖北赛区省赛成功举办

须弥芥子&#xff0c;数字如海。10月14日—15日&#xff0c;2023 年数字科技文化节——第16届全国三维数字化创新设计大赛湖北赛区省赛暨产教联合体大会在武汉软件工程职业学院成功举行。 &#xff08;大赛全体专家领导合影&#xff09; 全国三维数字化创新设计大赛组委会副秘…
阅读更多...
Windows 安装 jmeter

Windows 安装 jmeter

注&#xff1a;在安装Jmeter之前&#xff0c;请先检查下电脑有没有装JDK&#xff1a;开始->运行->然后输入cmd->进入命令行界面&#xff0c;输入java -version &#xff0c; 出现以下信息就是此电脑已安装了JDK&#xff1a; 下载地址 http://jmeter.apache.org/downlo…
阅读更多...
C/C++程序设计和预处理

C/C++程序设计和预处理

个人主页&#xff1a;仍有未知等待探索_C语言疑难,数据结构,小项目-CSDN博客 专题分栏&#xff1a;C语言疑难_仍有未知等待探索的博客-CSDN博客 目录 一、引言 二、程序的翻译环境和执行环境 1、什么是程序 2、程序的翻译环境 3、程序的执行环境 三、预处理 1、预定义符…
阅读更多...
python爬虫分析基于python图书馆书目推荐数据分析与可视化

python爬虫分析基于python图书馆书目推荐数据分析与可视化

收藏关注不迷路 文章目录 前言一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、文章目录 前言 随着电子技术的普及和快速发展&#xff0c;线上管理系统被广泛的使用&#xff0c;有很多商业机构都在实现电子信息化管理&#xff0c;图书推荐也不例外&#xff0c…
阅读更多...
windows协议详解之-RPC/SMB/LDAP/LSA/SAM域控协议关系

windows协议详解之-RPC/SMB/LDAP/LSA/SAM域控协议关系

如果你在windows域控环境中&#xff0c;例如企业的网络中开启wireshark抓包&#xff0c;你一定会遇到一大堆各种各样的协议。不同于互联网服务&#xff08;大多基于HTTP&#xff09;&#xff0c;为了实现域控中各种各样的服务&#xff0c;windows的域控环境中采用了非常多的协议…
阅读更多...
程桌面管理软件Apple Remote Desktop mac中文介绍说明

程桌面管理软件Apple Remote Desktop mac中文介绍说明

Apple Remote Desktop mac是一款远程桌面管理软件。它可以让用户通过局域网或互联网连接到其他远程计算机&#xff0c;并实时监控和管理这些计算机。 使用Apple Remote Desktop&#xff0c;用户可以轻松远程操作和控制其他计算机的桌面。用户可以在远程计算机上查看、操控和键入…
阅读更多...
风力发电功率预测（CEEMDAN-LSTM-CNN-CBAM模型，Python代码）

风力发电功率预测（CEEMDAN-LSTM-CNN-CBAM模型，Python代码）

1.前言 1.1.运行效果&#xff1a;风力发电功率预测&#xff08;CEEMDAN-LSTM-CNN-CBAM模型&#xff0c;Python代码&#xff09;_哔哩哔哩_bilibili 1.2.环境库&#xff1a; 如果库版本不一样&#xff0c; 一般也可以运行&#xff0c;这里展示我运行时候的库版本&#xff0c;是…
阅读更多...
J2EE的N层体系结构

J2EE的N层体系结构

J2EE平台采用了多层分布式应用程序模型&#xff0c;实现不同逻辑功能的应用程序被封装到不同的构件中&#xff0c;处于不同层次的构件可被分别部署到不同的机器中。 RMI/IIOP&#xff1a;RMI&#xff08;Remote Method Invocation&#xff0c;远程方法调用&#xff09;是Java的…
阅读更多...
C语言每日一题（18）数组匹配

C语言每日一题（18）数组匹配

牛客网 BC156 牛牛的数组匹配 题目描述 描述 牛牛刚学会数组不久&#xff0c;他拿到两个数组 a 和 b&#xff0c;询问 b 的哪一段连续子数组之和与数组 a 之和最接近。 如果有多个子数组之和同样接近&#xff0c;输出起始点最靠左的数组。 输入描述&#xff1a; 第一行输…
阅读更多...
网络安全https

网络安全https

http是明文的&#xff0c;相当于在网上裸奔&#xff0c;引出了https&#xff0c;大多数网站都转为了https&#xff0c;连非法的赌博网站有的都是https的。 1.https的网站是不是必须让用户装数字证书&#xff1f; 答&#xff1a;分两种&#xff0c;一种是单向认证&#xff0c;像…
阅读更多...
【STM32】HAL库ADC多通道精准测量（采用VREFINT内部参考电压）

【STM32】HAL库ADC多通道精准测量（采用VREFINT内部参考电压）

【STM32】HAL库ADC多通道精准测量&#xff08;采用VREFINT内部参考电压&#xff09; 文章目录 多通道测量VREFINTADC采样周期多通道配置 附录&#xff1a;Cortex-M架构的SysTick系统定时器精准延时和MCU位带操作SysTick系统定时器精准延时延时函数阻塞延时非阻塞延时 位带操作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023