【前端】webpack一本通

news2025/4/15 5:54:12

今日更新完毕，不定期补充，建议关注收藏点赞。

目录

  • 简介
  • 使用
    • webpack默认只能处理js文件 ->引入加载器
    • 对JS语法降级，兼容低版本语法
    • 合并文件
    • 再次打包
    • 进阶
  • 工作原理
  • html-webpack-plugin插件
  • webpack开发服务器
    • 引入
    • 使用webpack-dev-server模块：热更新

简介

官网

  • webpack作用（自动整合压缩并剔除无用代码）
    减少文件数量、缩小代码体积、提高浏览器打开速度
  • webpack定义
    一个第三方模块包, 用于分析, 并打包代码
    支持所有类型文件的打包
    支持less/sass => css
    支持ES6/7/8 => ES5
    压缩代码, 提高加载速度
    在这里插入图片描述
    webpack基于node, 所以导出遵守CommonJS规范
  • 安装
  1. 初始化文件夹包环境, 得到package.json文件
  2. 下载webpack等模块包
  3. 在package.json自定义命令, 为打包做准备
yarn init
yarn add webpack webpack-cli -D

#在配置文件中 配置自定义命令 
scripts: {
	"build": "webpack"
}

使用

  1. 默认src/index.js – 打包入口文件
  2. 引入到入口的文件才会参与打包
  3. 上述配置文件中的自定义命令，使得：执行package.json里build命令则执行webpack打包命令
  4. 默认输出dist/main.js的打包结果
  5. 借助webpack, 把模块和代码打包后，需要将打包结果引入到项目中生效。不希望“手动引入”这么麻烦的，可以安装html-webpack-plugin插件。其使用方法见后。
  • 更改webpack打包默认的入口和出口
    新建webpack.config.js
    填入配置，entry设置为入口文件路径，output对象设置出口路径和文件名
    打包观察效果
    在这里插入图片描述
  • 例子：webpack打包代码–jquery实现功能
    注意：webpack打包后的js需要引入到html中使用才能生效
    步骤：
    ①：从0准备环境, 初始化包环境, 下载webpack和webpack-cli包, 配置自定义命令build
    ②：yarn下载jquery, 新建public/index.html,写入内容
    ③：src/main.js 引入jquery, 编写功能代码
    ④：执行打包命令
    ⑤：复制public/index.html到dist/, 然后引入打包后的js, 运行网页观察效果

webpack默认只能处理js文件 ->引入加载器

  • 处理css文件
    css文件引入到入口里，webpack打包css文件依然会报错。如何让webpack能处理css文件：使用下面的两个加载器
    css-loader 文档
    style-loader文档
    css-loader 让webpack能处理css类型文件
    style-loader 把css插入到DOM中
  1. 下载加载器
yarn add css-loader style-loader -D
  1. webpack.config.js配置
module.exports={
	//其他配置 这里略
	module:{
		rules:[{
				test:/\.css$/i, //i 忽略大小写
				use:["style-loader","css-loader"]	
		}]
	}
}
  1. 打包观察效果：css代码被打包进js文件中，style-loader会把css代码插入到head下style标签内
  • 处理less文件
    加载器使用less-loader
    less-loader加载器作用: 识别less文件
    less作用：将less编译为css
yarn add less less-loader -D

//配置
	module:{
		rules:[
		//其他配置略
		{
			test:/\.less$/,
			use:["style-loader","css-loader","less-loader"]	
		}]
	}

步骤：新建src/less/index.less,把index.less引入到入口处,下载加载器和less来处理less文件,webpack.config.js针对less配置，（打包）转换成css后还需要css-loader和style-loader的处理。

  • 处理字体文件、图片文件
    webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader，文档: https://webpack.docschina.org/guides/asset-modules/
    以前用url-loader和file-loader来处理
    现在webpack.config.js – 针对图片文件设置type: “assets“，然后打包，小于8KB文件则转base64打包在js中, 大于8KB, 文件自动命名输出到dist下；字体和图片文件同理。
//配置
	module:{
		rules:[
		//其他配置略
		{
			test:/\.(png|jpg|gif|jpeg)$/i,
			type:'asset'
		}]
	}

为什么要区分8kb上下？
图片翻译成了base64, 放到了js文件中
-好处: 浏览器不用发请求了，直接可以读取, 速度快
-坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失

  • 处理字体图标
    • 注意：字体图标 v.s. 字体文件
      字体文件 和 字体图标（icon fonts） 是两个相关但不完全一样的东西。
  1. 字体文件，用于文本显示。常见格式包括：
    .ttf（TrueType Font）
    .otf（OpenType Font）
    .woff / .woff2（Web Open Font Format）
    .eot（Embedded OpenType）
  2. 字体图标（Icon Fonts）将图标图形设计成字体的形式，用 CSS 和 HTML 字符来显示图标。
    典型例子：Font Awesome、iconfont 阿里巴巴、Material Icons (Google)
    它们通常包含以下资源：
    字体文件（.woff, .ttf, .eot, .svg）
    一个 style.css 或 iconfont.css，映射图标 class 到字体字符，通过字体的形式显示图标，比如 <i class="icon-home"></i> 就能显示一个小房子图标。
.icon-home:before {
  content: "\e600";
}
  • 如何处理字体图标
  1. src/assets 下 放入fonts字体相关文件夹
  2. src/main.js 引入 assets/fonts/iconfont.css import '@iconfont/iconfont.css';
  3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上;或者html中使用图标<i class="icon-home"></i>
  4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
const path = require('path');

module.exports = {
 // 其他配置...
 module: {
   rules: [
     // 处理字体图标文件
     {
       test: /\.(woff2?|eot|ttf|otf|svg)$/,
       type: 'asset', //或asset/resource,
       generator: {
         filename: 'fonts/[hash][ext][query]', // 输出路径
       },
     },
//其他配置略...
   ],
 },
};
  1. 打包后运行网页观察效果：在webpack.configjs的rules里针对字体图标文件类型设置asset/resource, 直接输出到dist下

对JS语法降级，兼容低版本语法

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
babel-loader: 可以让webpack转译打包的js代码
babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

  1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
  2. 下载加载器
yarn add babel-loader @babel/core @babel/preset-env -D
  1. 配置到webpack.config.js上
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude:/(node_modules|bower_components)/,
        use:{
			loader:'babel-loader',
			options:{
				presets:['@babel/preset-env']
			}
		}
      },
//其他配置略...
    ],
  },
};
  1. 打包观察是否降级

合并文件

  • 2个js文件 ->打包成1个js文件
    新建src下的资源：add.js – 定义求和函数并导出，index.js – 引入add模块并使用函数输出结果
    执行 yarn build 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
    打包后默认生成dist和dist/main.js, 观察其中代码

再次打包

  • 代码增加后, 如何打包呢?
  1. 确保在src/index.js引入和使用
  2. 重新执行yarn build打包命令

进阶

  • 把css文件都独立打包提取成一个css文件在dist下
  • 把vue文件让webpack打包使用(百度vue-loader官网)

工作原理

  • yarn build
    所有要被打包的资源都要跟入口产生直接/间接的引用关系
    在这里插入图片描述

html-webpack-plugin插件

文档

yarn add html-webpack-plugin -D #下载

webpack.config.js中添加配置

const HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
	//其他配置 这里略
	plugins:[
		new HtmlWebpackPlugin({
			template:'./public/index.html' //webpack打包时自动生成html文件
		})
	]
}

webpack开发服务器

webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示。
打包在内存中, 速度快；自动更新打包变化的代码, 实时返回给浏览器显示；

引入

每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)；
原因:
从0构建依赖
磁盘读取对应的文件到内存, webpack开始加载
再用对应的 loader 进行处理
将处理完的内容, 输出到磁盘指定目录
解决：起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

使用webpack-dev-server模块：热更新

webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/

  1. 下载模块包yarn add webpack-dev-server -D
  2. 在package.json-配置自定义命令:自定义webpack开发服务器启动命令serve在package.json里
"scripts":{
	"build":"webpack",
	"serve":"webpack serve"
}
  1. 启动当前工程里的webpack开发服务器yarn serve，webpack-dev-server会给一个地址+端口浏览器，访问即可看到在内存中打包的index.html页面
  2. 重新编写代码, 观察控制台和浏览器是否自动打包和更新
  3. 改变webpack-dev-server配置
    webpack-dev-server配置文档: https://webpack.docschina.org/configuration/dev-server/#devserverafter
    在webpack.config.js中添加如下配置，重启webpack开发服务器即可
    都是去文档中找配置项的名字，在webpack.config.js – devServer选项里添加
module.exports={
	//其他配置略
	devServer:{
		port:8888 //自定义端口号
	}
}

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

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

相关文章

代码学习总结（一）

代码学习总结（一）

代码学习总结&#xff08;一&#xff09; 这个系列的博客是记录下自己学习代码的历程&#xff0c;有来自平台上的&#xff0c;有来自笔试题回忆的&#xff0c;主要基于 C 语言&#xff0c;包括题目内容&#xff0c;代码实现&#xff0c;思路&#xff0c;并会注明题目难度&…
阅读更多...
第十五届蓝桥杯C/C++B组省赛真题讲解（分享去年比赛的一些真实感受）

第十五届蓝桥杯C/C++B组省赛真题讲解（分享去年比赛的一些真实感受）

试题A——握手问题 一、解题思路 直接用高中学的排列组合思路 二、代码示例 #include<bits/stdc.h> using namespace std; int fun(int n) {int sum0;for(int i0;i<n;i){for(int ji1;j<n;j)sum; } return sum; } int main() {cout<<fun(50)-fun(7); }三、…
阅读更多...
【Qt】qDebug() ＜＜ “中文测试“； 乱码问题

【Qt】qDebug() ＜＜ “中文测试“； 乱码问题

环境 Qt Creator版本&#xff1a;4.7.1 编译器&#xff1a;MSVC2015_32bit 解法一 在.pro文件中添加 msvc:QMAKE_CXXFLAGS -execution-charset:utf-8注意&#xff1a; 1、需要清理项目&#xff0c;并重新qmake&#xff0c;然后构建。 测试项目下载&#xff1a;https://do…
阅读更多...
Vue接口平台学习六——接口列表及部分调试页面

Vue接口平台学习六——接口列表及部分调试页面

一、实现效果图及界面布局简单梳理 整体布局分左右&#xff0c;左边调试&#xff0c;右边显示接口列表 左侧&#xff1a; 一个输入框按钮&#xff1b;下面展示信息&#xff0c;大部分使用代码编辑器就好了&#xff0c;除了请求体传文件类型需要额外处理。然后再下方显示响应信…
阅读更多...
【C语言】预处理（下）（C语言完结篇）

【C语言】预处理（下）（C语言完结篇）

一、#和## 1、#运算符 这里的#是一个运算符&#xff0c;整个运算符会将宏的参数转换为字符串字面量&#xff0c;它仅可以出现在带参数的宏的替换列表中&#xff0c;我们可以将其理解为字符串化。 我们先看下面的一段代码&#xff1a; 第二个printf中是由两个字符串组成的&am…
阅读更多...
低频rfid手持机，助力动物耳标智能化管理

低频rfid手持机，助力动物耳标智能化管理

低频RFID手持机&#xff0c;助力动物耳标智能化管理&#xff0c;正逐步成为现代畜牧业不可或缺的工具。它不仅能够高效读取动物耳标中的信息&#xff0c;如唯一识别码、疫苗接种记录、健康状态等&#xff0c;还极大地提升了数据录入的准确性和时效性。 1.精准识别与追踪‌ 通过…
阅读更多...
【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习（一）

【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习（一）

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时&#xff0c;Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收。 Java 堆是垃圾收集器管理的主要区域&#xff0c;因此也被称作 GC 堆&#xff08;Garbage Collected Heap&am…
阅读更多...
Jieba分词的原理及应用（三）

Jieba分词的原理及应用（三）

前言 “结巴”中文分词&#xff1a;做最好的 Python 中文分词组件 上一篇文章讲了使用TF-IDF分类器范式进行企业级文本分类的案例。其中提到了中文场景不比英文场景&#xff0c;在喂给模型之前需要进行分词操作。 分词的手段有很多&#xff0c;其中最常用的手段还是Jieba库进行…
阅读更多...
Openlayers：flat样式介绍

Openlayers：flat样式介绍

在前段时间我在使用WebGL矢量图层时接触到了flat样式&#xff0c;我对其十分的感兴趣&#xff0c;于是我花了几天的时间对其进行了了解&#xff0c;在这篇文章中我将简单的介绍一下flat样式的使用方式以及我对其的一些理解。 一、了解flat样式 1.什么是flat样式&#xff1f; …
阅读更多...
149页研读——华为基于IPD全过程研发质量管理【附全文阅读】

149页研读——华为基于IPD全过程研发质量管理【附全文阅读】

本文介绍了IPD（集成产品开发）的全过程研发质量管理，强调了以客户需求为导向，通过跨部门协同、资源整合、快速响应等方式提高研发效率和成功率。文章详细阐述了IPD研发管理体系的精要，包括其核心思想、优势、框架以及核心理念。 其中，跨领域平台与技术研发、端到端流程与项…
阅读更多...
Oracle 23ai Vector Search 系列之5 向量索引（Vector Indexes）

Oracle 23ai Vector Search 系列之5 向量索引（Vector Indexes）

文章目录 Oracle 23ai Vector Search 系列之5 向量索引Oracle 23ai支持的向量索引类型内存中的邻居图向量索引 (In-Memory Neighbor Graph Vector Index)磁盘上的邻居分区矢量索引 (Neighbor Partition Vector Index) 创建向量索引HNSW索引IVF索引 向量索引示例参考 Windows 环…
阅读更多...
vue模拟扑克效果

vue模拟扑克效果

vue模拟扑克效果 效果图&#xff1a; step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue <template><div class"poker-container"><!-- 使用复合数据对象实现双行显示 --><divv-for"(card, index) in POKER_…
阅读更多...
Android12源码编译之预置Android Studio项目Android.mk文件编写

Android12源码编译之预置Android Studio项目Android.mk文件编写

1、在AndroidManifest.xml文件中添加package"com.sprd.silentinstalldemo"属性&#xff0c;因为新版本的Android Studio默认生成的AndroidManifest.xml是没有这个属性值的 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:an…
阅读更多...
Spring Boot 测试详解，包含maven引入依赖、测试业务层类、REST风格测试和Mock测试

Spring Boot 测试详解，包含maven引入依赖、测试业务层类、REST风格测试和Mock测试

Spring Boot 测试详解 1. 测试依赖引入 Spring Boot 默认通过以下 Maven 依赖引入测试工具&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</s…
阅读更多...
leetcode刷题日记——螺旋矩阵

leetcode刷题日记——螺旋矩阵

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 题目要求按顺时针顺序给出m行n列的矩阵的数组按照题目所给的顺序挨个插入答案数组中运行如下 int* spiralOrder(int** matrix, int matrixSize, int* matrixColSize, int* returnSize) {*returnSize matrixSize * matrixCol…
阅读更多...
模板引擎语法-标签

模板引擎语法-标签

模板引擎语法-标签 文章目录 模板引擎语法-标签[toc]一、用于进行判断的{% if-elif-else-endif %}标签二、关于循环对象的{% for-endfor %}标签三、关于自动转义的{% autoescape-endautoescape %}标签四、关于循环对象的{% cycle %}标签五、关于检查值是否变化的{% ifchange %}…
阅读更多...
深度学习学习笔记

深度学习学习笔记

目录 摘要 Abstracts 简介 Hourglass Module&#xff08;Hourglass 模块&#xff09; 网络结构 Intermediate Supervision&#xff08;中间监督&#xff09; 训练过程细节 评测结果 摘要 本周阅读了《Stacked Hourglass Networks for Human Pose Estimation》&#xf…
阅读更多...
当Browser Use遇见A2A：浏览器自动化与智能体协作的“冰与火之歌“

当Browser Use遇见A2A：浏览器自动化与智能体协作的“冰与火之歌“

——一场正在改写数字文明的技术奇遇 第一章 浏览器革命&#xff1a;从"手动挡"到"自动驾驶" 1.1 传统自动化工具的"中年危机" 还记得2023年那个抓狂的凌晨吗&#xff1f;你蹲守演唱会门票时&#xff0c;Selenium脚本因为验证码识别失败第108次…
阅读更多...
(已解决)如何安装python离线包及其依赖包 2025最新

(已解决)如何安装python离线包及其依赖包 2025最新

字数 305&#xff0c;阅读大约需 2 分钟 没有网络的Linux服务器上&#xff0c;如何安装完整的、离线的python包 1. 写入待安装的包 新建requirement.txt, 写入待安装的包 和 包的版本 如 flwr1.13.0 2.使用命令行直接下载 pip download -d flwr_packages -r requirements.tx…
阅读更多...
豪越赋能消防安全管控，解锁一体化内管“安全密码”

豪越赋能消防安全管控，解锁一体化内管“安全密码”

在消防安全保障体系中&#xff0c;内部管理的高效运作是迅速、有效应对火灾及各类灾害事故的重要基础。豪越科技凭借在消防领域的深耕细作与持续创新&#xff0c;深入剖析消防体系内部管理的痛点&#xff0c;以自主研发的消防一体化安全管控平台&#xff0c;为行业发展提供了创…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023