webpack5基础（上篇）

一、基本配置

在开始使用 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', // 会转成base64parser: {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.mzph.cn/diannao/66115.shtml

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

相关文章

boot-126网易邮件发送

boot-126网易邮件发送

【SpringBoot整合JavaMail发送邮件】 一 . Java Mail基本概念 1.SMTP Simple Mail Transfer Protocol:简单邮件传输协议，用于发送邮件的协议。 2.POP3 Post office Protocol 3:邮局通讯协议第三版，用于接收邮件的标准协议。 3.IMAP Internet Message Acc…
阅读更多...
《学校一卡通管理系统》数据库MySQL的设计与实现

《学校一卡通管理系统》数据库MySQL的设计与实现

引言：学校一卡通管理系统旨在为学校提供一个高效的数字化管理平台，集中管理学生和教职工的账户、充值、消费、查询等日常事务。通过该系统，学生可以便捷地进行充值、消费及查看余额，管理员则可以高效地管理用户账户、充值记录、消费记录等数据。系统采用MySQL数据库，通过视…
阅读更多...
【ArcGISPro/GeoScenePro】检查多光谱影像的属性并优化其外观

【ArcGISPro/GeoScenePro】检查多光谱影像的属性并优化其外观

数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 操作 其他数据 检查影像的属性 熟悉检查您正在使用的栅格属性非常重要。
阅读更多...
音视频入门基础：MPEG2-PS专题（4）——FFmpeg源码中，判断某文件是否为PS文件的实现

音视频入门基础：MPEG2-PS专题（4）——FFmpeg源码中，判断某文件是否为PS文件的实现

一、引言 通过FFmpeg命令： ./ffmpeg -i XXX.ps 可以判断出某个文件是否为PS文件： 所以FFmpeg是怎样判断出某个文件是否为PS文件呢？它内部其实是通过mpegps_probe函数来判断的。从《FFmpeg源码：av_probe_input_format3函数和AVI…
阅读更多...
[Python学习日记-74] 面向对象实战2——选课系统

[Python学习日记-74] 面向对象实战2——选课系统

[Python学习日记-74] 面向对象实战2——选课系统 简介 开发要求 实现：选课系统 简介 在前面的《年会答题系统》当中我们介绍了面向对象软件开发的一些流程，当然这一流程只是涵括了大部分的，目前在业界也没有一个统一的标准，每个…
阅读更多...
用户注册模块（芒果头条项目进度4）

用户注册模块（芒果头条项目进度4）

1 创建⽤户模块⼦应⽤ 1.1 在项⽬包⽬录下 创建apps的python包。 1.2 在apps包下 创建应⽤userapp $ cd 项⽬包⽬录/apps $ python ../../manage.py startapp userapp 1.3 配置导包路径 默认情况下导包路径指向项⽬根⽬录 # 通过下⾯语句可以打印当前导包路径 print(sys.pa…
阅读更多...
5. C语言 常量与宏定义

5. C语言 常量与宏定义

本章目录: 前言一、什么是常量？1. 整型常量2. 浮点型常量3. 字符常量4. 字符串常量 二、如何定义常量？1. 使用 #define 宏定义2. 使用 const 关键字 三、#define 和 const 的区别四、使用建议1. 使用场景区分2. 避免宏定义的潜在问题 五、特殊用法与小技…
阅读更多...
随机置矩阵列为0[矩阵乘法pytorch版]

随机置矩阵列为0[矩阵乘法pytorch版]

文章目录 1. 举例：2. python 代码 1. 举例： A [ 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ] , r a n d [ 0 , 5 , 2 ] → A [ 0 1 0 3 4 0 6 7 0 9…
阅读更多...
Elasticsearch：利用 AutoOps 检测长时间运行的搜索查询

Elasticsearch：利用 AutoOps 检测长时间运行的搜索查询

作者：来自 Elastic Valentin Crettaz 了解 AutoOps 如何帮助你调查困扰集群的长期搜索查询以提高搜索性能。 AutoOps 于 11 月初在 Elastic Cloud Hosted 上发布，它通过性能建议、资源利用率和成本洞察、实时问题检测和解决路径显著简化了集群管理。 Au…
阅读更多...
uniapp实现后端数据i18n国际化

uniapp实现后端数据i18n国际化

1.在main.js配置请求获取到数据再设置到i18n中， 我这里是通过后端接口先获取到一个多个数据的的json链接，通过链接再获取数据，拿到数据后通过遍历的方式设置i18n //接口数据示例：{"vi": "http://localhost:8899/…
阅读更多...
关于Flutter应用国际化语言的设置

关于Flutter应用国际化语言的设置

目录 1. Locale配置 2. 用户切换/启动自动加载缓存里面的locale 由于最近在开发app国际化设置的时候遇到一些问题，所以做出一些总结。 1. Locale配置 具体的初始化配置可以参考文档：i18n | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 值得…
阅读更多...
基层医联体医院患者历史检验检查数据的快速Python编程分析

基层医联体医院患者历史检验检查数据的快速Python编程分析

​​​​​​​ 一、引言 1.1 研究背景与意义 在当今数字化医疗时代，医疗数据呈爆炸式增长，涵盖患者的基本信息、病史、检验检查结果、治疗方案等各个维度。这些海量且复杂的数据蕴含着巨大价值，为精准医疗决策提供了关键依据。通过对患者历史检验检查数据的深入对比分析…
阅读更多...
如何使用OpenCV进行抓图-多线程

如何使用OpenCV进行抓图-多线程

前言 需求： 1、如何使用OpenCV捕抓Windows电脑上USB摄像头的流、 2、采用多线程 3、获知当前摄像头的帧率。 这个需求，之前就有做了，但是由于出现了一个问题，人家摄像头的帧率目前都可以达到60帧/s 了，而我的程序…
阅读更多...
数势科技：解锁数据分析 Agent 的智能密码（14/30）

数势科技：解锁数据分析 Agent 的智能密码（14/30）

一、数势科技引领数据分析变革 在当今数字化浪潮中，数据已然成为企业的核心资产，而数据分析则是挖掘这一资产价值的关键钥匙。数势科技，作为数据智能领域的领军者，以其前沿的技术与创新的产品，为企业开启了高效数据分析…
阅读更多...
26.Java Lock 接口（synchronized 关键字回顾、可重入锁快速入门、Lock 对比 synchronized）

26.Java Lock 接口（synchronized 关键字回顾、可重入锁快速入门、Lock 对比 synchronized）

一、synchronized 关键字 1、synchronized 关键字回顾 synchronized 是 Java 中的关键字，是一种同步锁，它修饰的对象有以下几种 修饰一个类：其作用的范围是 synchronized 后面括号括起来的部分，作用的对象是这个类的所有对象 修…
阅读更多...
C++11编译器优化以及引用折叠

C++11编译器优化以及引用折叠

1.左值与右值的意义 1.左值引用和右值引用最终目的是减少拷贝，提高效率 2.左值引用还可以修改参数/返回值 左值引用不足： 部分函数放回场景，只能传值返回，不能引用左值返回 当前函数局部对象，出了当前函数作用域生…
阅读更多...
云手机 —— 手机矩阵的 “超级外挂

云手机 —— 手机矩阵的 “超级外挂

如何打造手机矩阵 打造手机矩阵主要包括以下几个步骤: 1.确定目标与需求:首先，明确打造手机矩阵的目的和需求，是为了进行电商运营、自媒体推广、任务管理还是其他目的。这将决定后续的手机数量、操作系统选择以及应用安装等。 2.选择手机与操作系统:根据…
阅读更多...
小程序学习06——uniapp组件常规引入和easycom引入语法

小程序学习06——uniapp组件常规引入和easycom引入语法

目录 一 组件注册 1.1 组件全局注册 1.2 组件全局引入 1.3 组件局部引入 页面引入组件方式 1.3.1 传统vue规范： 1.3.2 通过uni-app的easycom 二 组件的类型 2.1 基础组件列表 一 组件注册 1.1 组件全局注册 （a）新建compoents文件…
阅读更多...
【时时三省】(C语言基础）常见的动态内存错误2

【时时三省】(C语言基础）常见的动态内存错误2

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 对非动态开辟空间内存使用free释放 示例： 这个arr数组是在栈上的 *p指向的就是arr 对非动态空间也用了free ferr只能在动态开辟空间使用 使用free释放一块动态开辟空间的一部分…
阅读更多...
3D高斯点云CUDA版本数据制作与demo运行

3D高斯点云CUDA版本数据制作与demo运行

0. 简介 关于UCloud(优刻得)旗下的compshare算力共享平台 UCloud(优刻得)是中国知名的中立云计算服务商，科创板上市，中国云计算第一股。 Compshare GPU算力平台隶属于UCloud，专注于提供高性价4090算力资源，配备独立IP，…
阅读更多...
最新文章

Copyright @ 2022~2023