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

news2025/11/4 16:53:14

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.coloradmin.cn/o/1129041.html

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

相关文章

iview项目中，radio选中值回显问题

iview项目中，radio选中值回显问题

问题描述&#xff1a;iviewvue项目中&#xff0c;数据从路由传参进入编辑页面&#xff0c;页面的radio选中状态首次显示&#xff0c;浏览器刷新后不显示&#xff1a; 1、首次进入&#xff1a; 2、浏览器手动刷新后&#xff1a; 经查&#xff0c;路由传参的值为字符串&#xff…
阅读更多...
【ARM AMBA Q_Channel 详细介绍】

【ARM AMBA Q_Channel 详细介绍】

文章目录 1.1 Q_Channel 概述1.2 Q-Channel1.2.1 Q-Channel 接口1.2.2 Q-Channel 接口的握手状态1.2.3 握手信号规则 1.3 P_Channel的握手协议1.3.1 device 接受 PMU 的 power 请求1.3.2 device 拒绝 PMU 的 power 请求 1.4 device 复位信号与 Q _Channel 的结合1.4.1 RESETn 复…
阅读更多...
驱动开发5 阻塞IO实例、IO多路复用

驱动开发5 阻塞IO实例、IO多路复用

1 阻塞IO 进程1 #include <stdlib.h> #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <sys/ioctl.h> #include <fcntl.h> #include <unistd.h> #include <string.h>int main(int argc, char co…
阅读更多...
真空室的内表面加工

真空室的内表面加工

真空室和部件的内表面是在高真空和超高真空下实现工作压力的重要因素。必须在该条件下进行加工&#xff0c;以最小化有效表面&#xff0c;并产生具有最小解吸率的表面。 真空室和部件的表面往往是在焊接和机械加工后经过精细玻璃珠喷砂的。具有限定直径的高压玻璃珠被吹到表面…
阅读更多...
Python创建条形图加点重叠

Python创建条形图加点重叠

目录 代码效果图 要使用Python的Seaborn库创建一个条形图加点重叠的统计图&#xff0c;可以使用 seaborn.barplot和 seaborn.stripplot函数。以下是一个论文级别的简单示例代码&#xff0c;演示如何创建这种效果的图 代码 import seaborn as sns import matplotlib.pyplot a…
阅读更多...
05 MIT线性代数-转置,置换,向量空间Transposes, permutations, spaces

05 MIT线性代数-转置,置换,向量空间Transposes, permutations, spaces

1. Permutations P: execute row exchanges becomes PA LU for any invertible A Permutations P identity matrix with reordered rows mn (n-1) ... (3) (2) (1) counts recordings, counts all nxn permuations 对于nxn矩阵存在着n!个置换矩阵 , 2. Transpose: 2.…
阅读更多...
如何将 huggingface上的模型文件下载到本地

如何将 huggingface上的模型文件下载到本地

写在前面 缘由&#xff1a;国内的GPU服务器直接调取 huggingface 上模型经常会失败&#xff0c;因此下载到本地就能免去许多麻烦。 方法三基于知乎上一位博主所提出方法的基础上进行改进&#xff0c;可以将huggingface上模型由 Colab 存进 谷歌云盘 或者 百度云盘。特别是有些…
阅读更多...
Appium+Python+pytest自动化测试框架的实战

Appium+Python+pytest自动化测试框架的实战

本文主要介绍了AppiumPythonpytest自动化测试框架的实战&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下 先简单介绍一下目录&#xff0c;再贴一些代码&#xff0c;代码里有注释 Basic目录下写的是一些公…
阅读更多...
【文章学习系列之模型】Koopa

【文章学习系列之模型】Koopa

本章内容 文章概况模型结构主要结构实验结果消融实验模型效率分解效果定性分解效果定量算子稳定性 总结 文章概况 《Koopa: Learning Non-stationary Time Series Dynamics with Koopman Predictors》是2023年发表于NeurIPS的一篇论文。考虑到时序预测中训练和推理数据之间甚至…
阅读更多...
网工内推 | 网络工程师，大专以上、HCIA认证即可，最高14薪

网工内推 | 网络工程师，大专以上、HCIA认证即可，最高14薪

01 湖南口味王集团 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、负责园区内电脑日常维护&#xff1b; 2、负责园区内办公周边设备的日常维护&#xff0c;如打印机、投影仪等&#xff1b; 3、负责园区内电话日常维护&#xff1b; 4、负责园区内信息资产管理&#…
阅读更多...
vcomp100.dll丢失的解决方法，一键修复vcomp100.dll丢失问题

vcomp100.dll丢失的解决方法，一键修复vcomp100.dll丢失问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“vcomp100.dll丢失”。这个错误通常会导致某些程序无法正常运行&#xff0c;给用户带来困扰。为了解决这个问题&#xff0c;我整理了以下五个解决方法&#xff0c;希望能对大家有所帮助。 一…
阅读更多...
Python-----for循环基本语法及其应用---对序列进行遍历循环

Python-----for循环基本语法及其应用---对序列进行遍历循环

for循环基本语法 for循环结构主要用于&#xff08;序列 &#xff1a;包括 字符串、列表、元组、集合以及字典&#xff09;类型数据的遍历&#xff08;循环&#xff09;操作。 遍历(Traversal)&#xff0c;是指沿着某条搜索路线&#xff0c;依次对树&#xff08;或图&#…
阅读更多...
《深入理解java虚拟机 第三版》学习笔记三

《深入理解java虚拟机 第三版》学习笔记三

第 8 章 虚拟机字节码执行引擎 代码编译的结果从本地机器码转变为字节码&#xff0c;是存储格式发展的一小步&#xff0c;却是编程语言发展的一大步。 8.1 概述 执行引擎是 Java 虚拟机核心的组成部分之一。“虚拟机”是一个相对于“物理机”的概念&#xff0c;这两种机器都…
阅读更多...
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告

Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告

这篇文章主要介绍了Python3 Appium 安卓模拟器实现APP自动化测试并生成测试报告,本文给大家介绍的非常详细&#xff0c;对大家的学习或工作具有一定的参考借鉴价值&#xff0c;需要的朋友可以参考下 正文 一、安装Python3 直接登录Python官网https://www.python.org/&…
阅读更多...
C++数据结构X篇_21_插入排序（稳定的排序）

C++数据结构X篇_21_插入排序（稳定的排序）

文章目录 1. 插入排序原理2. 算法图解3. 核心代码&#xff1a;4. 插入排序整体代码实现 1. 插入排序原理 插入排序是一种最简单直观的排序算法&#xff0c;它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相…
阅读更多...
Unity 自定义小地图

Unity 自定义小地图

最近工作做了个小地图&#xff0c;再此记录下思路。 1、准备所需素材 显示为地图&#xff08;我们取顶视图&#xff09;。创建一个Cube&#xff0c;缩放到可以把实际地图包住。实际地图的尺寸和偏移量 。我这里长宽都是25&#xff0c;偏移量&#xff08;1&#xff0c;0&…
阅读更多...
MySQL进阶（数据库引擎）——MyISAM和InnoDB引擎的区别

MySQL进阶（数据库引擎）——MyISAM和InnoDB引擎的区别

1.是否支持行级锁 MyISAM 只有表级锁&#xff0c;而InnoDB 支持行级锁和表级锁&#xff0c;默认为行级锁。 &#xff08;1&#xff09;MySQL大致可以归纳为以下3种锁&#xff1a; 表级锁&#xff1a;开销小&#xff0c;加锁快&#xff1b;不会出现死锁&#xff1b;锁的粒度大…
阅读更多...
C# FileInfo类的使用方法及常用操作（附代码示例）

C# FileInfo类的使用方法及常用操作（附代码示例）

在C#编程中&#xff0c;处理文件操作是一项常见而重要的任务。为了更好地管理和操作文件&#xff0c;C#提供了一个强大且灵活的FileInfo类。本文将深入探讨C# FileInfo类的使用方法&#xff0c;并为您提供一些实用的代码示例。 目录 一、什么是FileInfo类&#xff1f;二、使用F…
阅读更多...
CLion使用SSH远程连接Linux服务器

CLion使用SSH远程连接Linux服务器

最近要一直用实验室的服务器写Linux下的C代码, 本来一直用VScode(SSH)连接服务器, 但是我以前还是用JetBrains的IDE用的多, 毕竟他家的IDE代码提示和功能在某些细节上更加丰富。所以这次我使用了Clion里的远程连接(同样也是SSH工具)连接上了我的服务器, 实现了和VScode上同样的…
阅读更多...
NOIP2023模拟1联测22 黑暗料理

NOIP2023模拟1联测22 黑暗料理

NOIP2023模拟1联测22 黑暗料理 题目大意 自己看 思路 两个数相加能够产生质数的情况就是&#xff1a;11 或者 偶数质数 那么 1 1 1 不能保留超过一个 建一个图&#xff0c;原点连向所有奇数点&#xff0c;所有偶数点连向汇点&#xff0c;奇数点和偶数点的和为奇数的就相连 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023