webpack5基础（上篇）

news2025/1/4 19:19:06

一、基本配置

在开始使用 webpack 之前，我们需要对 webpack 的配置有一定的认识

1、5大核心概念

1）entry （入口）

指示 webpack 从哪个文件开始打包

2）output（输出）

制视 webpack 打包完的文件输出到那里去，如何命名等

3）loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader webpack 才能解析

4）plugins（插件）

扩展 webpack 的功能

5）mode（模式）

主要有两种模式：
开发模式：development
生产环境：production

2、配置文件

项目中添加 文件，命名为 webpack.config.js

const path = require("path")

module.exports = {
  // 入口
  entry: "./main.js",// 相对路径
  // 输出
  output: {
    // __dirname 是 nodejs 的遍历，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"),// 绝对路径
    filename: "main.js"
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
    ]
  },
  // 插件
  plugins: [

  ],
  // 模式
  mode: "development", // 开发模式
}

二、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事情：

1、编译代码，使浏览器能够识别运行

开发时我们有样式资源、字体图标、图片压缩、html资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2、代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观

三、处理样式资源

css，less，sass，scss styl 等样式资源

SCSS/SASS 相对于 CSS 的优势：

变量支持

// 定义变量
$primary-color: #3498db;
$font-size: 16px;

// 使用变量
body {
  font-size: $font-size;
  color: $primary-color;
}

更好的样式嵌套

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
     a {
      color: $primary-color;
    }
  }
}

可复用的混合宏（Mixins）

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

样式继承

.btn {
  padding: 10px;
  background-color: $primary-color;
}
.btn-primary {
  @extend .btn;
}

条件语句和循环

$theme: light;
body {
  @if $theme == light {
    background-color: white;
  } @else {
    background-color: black;
  }
}
// 循环生成多个类
@for $i from 1 to 5 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

样式模块化（Partials）

// _variables.scss
$primary-color: #3498db;

//index.scss
@import 'variables';

数学运算

.container {
  width: 100% - 20px;
  margin: 10px * 2;
}

更强的性能优化能力：
SCSS/SASS 在编译时会压缩和优化代码，移除多余的空格、注释等，从而减少最终生成的 CSS 文件的大小，提高页面加载性能。

CSS 需要手动进行优化，或者依赖外部工具进行压缩。

支持模块系统（@use 和 @forward）

// _colors.scss
$primary-color: #3498db;
// main.scss
@use 'colors';
body {
  color: colors.$primary-color;
}

1、介绍

webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 webpack 解析样式资源
我们找 Loader 都应该去官方文档中查找使用
官方文档：https://webpack.docschina.org/concepts/#loaders

2、处理 css 资源

1）下载包

npm i css-loader style-loader -D
注意：需要下载两个 loader

2）功能介绍

css-loader： 负责将 css 文件编译成 webpack 能识别的模块

style-loader：会动态创建一个 style 标签，里面放置webpack 中 css 模块内容

此时样式就会以 style 标签的形式在页面上生效

3）配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

const path = require("path")

module.exports = {
  // 入口
  entry: "./main.js",// 相对路径
  // 输出
  output: {
    // __dirname 是 nodejs 的遍历，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"),// 绝对路径
    filename: "main.js"
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      {
        test: /\.css$/i,// 正则检测哪些文件
        // use 的执行顺序 从右往左（从下到上）， 
        use: [
          'style-loader', // 通过创建style 标签添加到html 文件中生效
          'css-loader' // 将css 资源编译成 commonjs的模块到 js 中
        ],
      },
    ]
  },
  // 插件
  plugins: [

  ],
  // 模式
  mode: "development", // 开发模式
}

3、处理 less 资源

1）安装

npm install less less-loader --save-dev
将 less 文件编译成 css 文件

2）配置(webpack.config.js)：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、处理 scss/sass 资源

1）安装

npm install sass-loader sass webpack --save-dev

2）配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,//匹配 sass/scss 两种文件
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

5、处理 Styl 资源

1）安装

npm i stylus-loader -D

2）配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/i,//匹配 sass/scss 两种文件
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'stylus-loader',
        ],
      },
    ],
  },
};

四、处理图片资源

过去在 webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 webpack5 已经将两个 Loader 功能内置到 webpack 里了，我们只需要简单配置即可处理图片资源

1、配置

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'main.js'
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        }
      }
    ]
  }
}

图片转成 base64 的优势是 减少请求数量，缺点是体积会变大。
一般小图片会考虑转成 base64， 大图还是请求（如果也转换 base64 的话就导致页面加载缓慢）

有转换的时候，图片在打包后的文件夹里会少一些

2、修改不同资源的输出目录，比如图片到 image， css 到 css 文件夹

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js'// 入口的文件打包以后输出到 js 中
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      }
    ]
  }
}

3、自动清空上次打包的内容

webpack4 需要 clearwebpackplugin 的插件来处理，webpack5 加一个 clean 参数即可

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js',// 入口的文件打包以后输出到 js 中
    clean: true // 原理：到抱歉将path 整个目录内容清空
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      }
    ]
  }
}

五、处理字体图标资源

1、下载字体图标并引入到 main.js 中

iconfont，可以在阿里巴巴的矢量图中下载。

const path = require("path");
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js',// 入口的文件打包以后输出到 js 中
    clean: true // 原理：到抱歉将path 整个目录内容清空
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset', // 会转成base64
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      },
       {
        test: /\.(ttf|woff2?)/,
        type: 'asset/resource', // 原样输出，不再转换
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/fonts/[hash:10][ext][query]'
       }
      }
    ]
  }
}

六、处理 js 资源

为什么还需要处理 js资源？
原因是 webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以还需要做一些兼容性处理

1、Eslint

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它用来检测 js 和 jsx 的工具，可以配置各项功能

1.1 配置文件

配置文件有很多写法

  • eslintrc.* 新建文件，位于项目根目录
    .eslintrc
    .eslintrc.js
    .eslintrc.json
    区别在于配置格式不一样

ESlint会查找和自动读取他们，所以以上配置文件只需要存在一个即可

1.2 具体配置

以 .eslintrc.js 配置文件为例

module.exports = {
  // 解析选项
  parserOptions: {
     ecamVersion: 6,// ES 语法版本
      sourceType: 'module',// ES 模块化
      ecmaFeatures: {
        // ES 其他特性
        jsx: true, // 如果是 React 项目，就需要开启 jsx 语法
      }
  },
  // 具体检查规则
  rules: {
  //  "off" 或 0：关闭规则
  // "warn" 或 1：开启规则，使用警告级别的错误，warn 不会导致程序退出
  // “error”或2：开启规则，使用错误级别的错误：error 当被触发的时候，程序会退出
    semi: "error", // 禁止使用分号
    'array-callback-return': 'warn',// 强制数组方法的回调函数中有 return 语句，否则警告
    'default-case': [
      'warn',
      {commonentPattern: '^no default$'} // 允许在最后注释 no default ，就不会有警告了
    ],
    eqeqeq: [
      'warn', // 强制使用 === 和 !== ，否则警告
      'smart'
    ]
  },
  // 继承其他规则，直接使用 网站上别人写好的规则或者是官方写好的规则
  extends: []
}

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

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

相关文章

活动预告 |【Part2】 Azure 在线技术公开课：迁移和保护 Windows Server 和 SQL Server 工作负载

活动预告 |【Part2】 Azure 在线技术公开课：迁移和保护 Windows Server 和 SQL Server 工作负载

课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft 云技术的了解。参加我们举办的“迁移和保护 Windows Server 和 SQL Server 工作负载”活动，了解 Azure 如何为将工作负载…
阅读更多...
Docker Compose 构建 EMQX 集群 实现mqqt 和websocket

Docker Compose 构建 EMQX 集群 实现mqqt 和websocket

EMQX 集群化管理mqqt真香 目录 #目录 /usr/emqx 容器构建 vim docker-compose.yml version: 3services:emqx1:image: emqx:5.8.3container_name: emqx1environment:- "EMQX_NODE_NAMEemqxnode1.emqx.io"- "EMQX_CLUSTER__DISCOVERY_STRATEGYstatic"- …
阅读更多...
067B-基于R语言平台Biomod2模型的物种分布建模与数据可视化-高阶课程【2025】

067B-基于R语言平台Biomod2模型的物种分布建模与数据可视化-高阶课程【2025】

课程培训包含：发票全套软件脚本学习数据视频文件导师答疑 本教程旨在通过系统的培训学习，学员可以掌握Biomod2模型最新版本的使用方法，最新版包含12个模型（ANN, CTA, FDA, GAM, GBM, GLM, MARS, MAXENT, MAXNET, RF, SRE, XGBOOST…
阅读更多...
USB 中断传输的 PID 序列

USB 中断传输的 PID 序列

文章目录 中断传输的 PID 序列全速设备抓包高速设备抓包参考中断传输的 PID 序列 端点在初始化后，从 DATA0 开始，每成功执行一个事务，数据包序列翻转一次（从 DATA0 变为DATA1 或从 DATA1 变为 DATA0)。 数据翻转和传输的个数没有直接关系，只由端点在初始化后处理的总数决…
阅读更多...
ESP32物联网无线方案，智能穿戴设备联网通信，产品无线交互应用

ESP32物联网无线方案，智能穿戴设备联网通信，产品无线交互应用

在物联网的世界里，每一个设备都不再是孤立的个体，它们通过无线连接芯片相互连接，形成一个庞大的智能网络。这些芯片是实现万物互联的基础，它们使得设备能够相互沟通，共享数据，从而创造出无限的可能性。 这…
阅读更多...
C语言格式输出

C语言格式输出

1.转换字符说明： 2.常用的打印格式： 在 C 语言中，格式输出主要依靠 printf 函数来实现。以下是一些 C 语言格式输出的代码举例及相关说明。 printf("%2d"，123)，因为输出的部分有三位数，但是要求…
阅读更多...
GJB系统设计说明模板

GJB系统设计说明模板

GJB系统设计说明模板及详解 1 范围 1.1 标识 1.2 系统概述 1.3 文档概述 2 引用文档 GJB XXX XXX XXX； XXX XXX。 前2章通用不再赘述 3 系统级设计决策 系统设计决策的目的:对系统规格说明中的关键需求(包括功能、质量属性和设计约束)进行分析,得到系统级概念性架构…
阅读更多...
windows编译llama.cpp GPU版本

windows编译llama.cpp GPU版本

Build 指南 https://github.com/ggerganov/llama.cpp/blob/master/docs/build.md 一、Prerequire 具体步骤（以及遇到的坑）： 如果你要使用CUDA，请确保已安装。 1.安装 最新的 cmake, git, anaconda， pip 配置pyt…
阅读更多...
Unity WebGL 部署IIS

Unity WebGL 部署IIS

Unity WebGL 部署IIS iis添加网站WebGL配置文件WebGL Gzip模式浏览器加载速度优化iis添加网站 第一步在配置好IIS并且添加网站 WebGL配置文件 在web包Build文件夹同级创建web.config文件 web.config文件内容 <?xml version="1.0" encoding="UTF-8"?…
阅读更多...
职场常用Excel基础03-自定义排序

职场常用Excel基础03-自定义排序

大家好&#xff0c;今天和大家一起分享一下excel中的自定义排序~ 通过排序&#xff0c;用户可以快速地对表格中的数据进行整理&#xff0c;以便更直观地观察趋势、查找特定信息或为后续的数据分析做准备。除了标准的升序和降序排序外&#xff0c;Excel还提供了强大的自定义排序…
阅读更多...
每天40分玩转Django：Django类视图

每天40分玩转Django：Django类视图

Django类视图 一、知识要点概览表 类别知识点掌握程度要求基础视图View、TemplateView、RedirectView深入理解通用显示视图ListView、DetailView熟练应用通用编辑视图CreateView、UpdateView、DeleteView熟练应用Mixin机制ContextMixin、LoginRequiredMixin理解原理视图配置U…
阅读更多...
PgSQL如何用cmd命令行备份和还原数据库

PgSQL如何用cmd命令行备份和还原数据库

一、备份 备份为压缩的二进制格式&#xff08;通常更快且占用空间更少&#xff09; pg_dump -U username -Fc -h hostname -p port -d dbname -F p -f backup.sql-U username&#xff1a;指定连接数据库的用户名&#xff08;默认是 postgres&#xff09;。-Fc&#xff1a;备…
阅读更多...
QT-------------多线程

QT-------------多线程

实现思路 QThread 类简介&#xff1a; QThread 是 Qt 中用于多线程编程的基础类。可以通过继承 QThread 并重写 run() 方法来创建自定义的线程逻辑。新线程的执行从 run() 开始&#xff0c;调用 start() 方法启动线程。 掷骰子的多线程应用程序&#xff1a; 创建一个 DiceThre…
阅读更多...
VBA批量插入图片到PPT，一页一图

VBA批量插入图片到PPT，一页一图

Sub InsertPicturesIntoSlides()Dim pptApp As ObjectDim pptPres As ObjectDim pptSlide As ObjectDim strFolderPath As StringDim strFileName As StringDim i As Integer 设置图片文件夹路径strFolderPath "C:\您的图片文件夹路径\" 请替换为您的图片文件夹路径…
阅读更多...
当知识图谱遇上文本智能处理，会擦出怎样的火花？

当知识图谱遇上文本智能处理，会擦出怎样的火花？

目前以理解人类语言为入口的认知智能成为了人工智能发展的突破点&#xff0c;而知识图谱则是迈向认知智能的关键要素。达观数据在2018AIIA人工智能开发者大会承办的语言认知智能与知识图谱公开课上&#xff0c;三位来自企业和学术领域的专家分别从不同角度讲述的知识图谱的应用…
阅读更多...
数据挖掘——回归算法

数据挖掘——回归算法

数据挖掘——回归算法 回归算法线性回归最小二乘法优化求解——梯度下降法逻辑回归逻辑回归函数逻辑回归参数估计逻辑回归正则化 决策树回归小结 回归算法 回归分析 如果把其中的一些因素&#xff08;房屋面积&#xff09;作为自变量&#xff0c;而另一些随自变量的变化而变化…
阅读更多...
Ubuntu 24.04 LTS 解决网络连接问题

Ubuntu 24.04 LTS 解决网络连接问题

1. 问题描述 现象&#xff1a;ens33 网络接口无法获取 IPv4 地址&#xff0c;导致网络不可用。初步排查&#xff1a; 运行 ip a&#xff0c;发现 ens33 接口没有分配 IPv4 地址。运行 ping www.baidu.com&#xff0c;提示“网络不可达”。查看 NetworkManager 日志&#xff0c…
阅读更多...
spring-boot启动源码分析（二）之SpringApplicationRunListener

spring-boot启动源码分析（二）之SpringApplicationRunListener

在上一篇《spring-boot启动源码分析&#xff08;一&#xff09;之SpringApplication实例构造》后&#xff0c;继续看了一个月的Spring boot启动源码&#xff0c;初步把流程看完了&#xff0c;接下来会不断输出总结&#xff0c;以巩固这段时间的学习。同时也希望能帮到同样感兴趣…
阅读更多...
基于N-HiTS神经层次插值模型的时间序列预测——cross validation交叉验证与ray tune超参数优化

基于N-HiTS神经层次插值模型的时间序列预测——cross validation交叉验证与ray tune超参数优化

论文链接&#xff1a;https://arxiv.org/pdf/2201.12886v3 N-HiTS: Neural Hierarchical Interpolation for TimeSeries Forecasting \begin{aligned} &\text{\large \color{#CDA59E}N-HiTS: Neural Hierarchical Interpolation for TimeSeries Forecasting}\\ \end{aligne…
阅读更多...
Lumos学习王佩丰Excel第二十三讲：Excel图表与PPT

Lumos学习王佩丰Excel第二十三讲：Excel图表与PPT

一、双坐标柱形图的补充知识 1、主次坐标设置 2、主次坐标柱形避让&#xff08;通过增加两个系列&#xff0c;挤压使得两个柱形挨在一起&#xff09; 增加两个系列 将一个系列设置成主坐标轴&#xff0c;另一个设成次坐标轴 调整系列位置 二、饼图美化 1、饼图美化常见设置 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023