当前位置： 首页 > news >正文

WebPack5.0 快速入门

news 来源：原创 2024/9/20 21:27:53

前端工程化WebPack5️⃣

前置知识： 此文章属于前端——框架进阶篇，需要实现掌握：HTML+CSS+JS三件套、Node...

😀推荐分享一波个人Blog文档： JavaScript、前端工程\模块化、邂逅Node.JS的那一夜

什么是WebPack❓

Webpack是一个强大的静态模块打包工具🧰

主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，

然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；

静态模块： 指的是编写代码过程中，html、css、js、图片、文件🖺 等固定内容的资源；

打包： 把静态模块内容，压缩，整合，转译等… 🧊前端工程化；

  • WebPack支持多种模块标准语法
  • 把 less/sass 转成 css 代码
  • 把 ES6+降级成 ES5

什么是WebPack❓

Webpack是一个强大的静态模块打包工具🧰

主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，

然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；

静态模块： 指的是编写代码过程中，html、css、js、图片、文件🖺 等固定内容的资源；

打包： 把静态模块内容，压缩，整合，转译等… 🧊前端工程化；

  • WebPack支持多种模块标准语法
  • 把 less/sass 转成 css 代码
  • 把 ES6+降级成 ES5

为什么要使用WebPack❓

Webpack的需求主要是为了解决在传统Web开发中遇到的一些问题：

  • 多文件问题： 在没有模块打包工具的时代，一个项目通常有很多JavaScript文件🗃️；

    你需要在HTML中通过多个<script>标签引入它们，这会导致大量的HTTP请求，增加页面加载时间⏲️

    Webpack允许你将这些文件打包成：一个或几个bundle，减少了请求的数量，提高了加载效率📈

  • 新技术兼容支持： 现代JavaScript应用程序越来越倾向于使用：ES6+、TypeScript、🖽框架特有的语法

    这些新技术并不是所有浏览器都原生支持的： Webpack可以将这些现代代码转换为浏览器能够理解的格式；

  • 资源管理： Webpack还可以处理其他类型的资源，如图片、字体和样式表，它提供了loader和插件系统

    让你可以灵活地处理这些资源，并将它们包含在打包结果中；

  • 模块依赖： Webpack自动处理应用程序的依赖关系图；

    传统的构建工具要求你手动声明所有依赖，而Webpack会基于你的代码中的引用和导出来推断这些依赖；

  • 性能优化： Webpack关注性能加载时间，提供代码分割、懒加载等功能，优化最终的bundle大小，提升应用性能；

Webpack是前端开发中非常重要的工具，特别是在处理大型复杂的JavaScript应用程序时

帮助开发者组织和优化他们的代码和资源，使得应用程序加载更快，运行更高效；

WebPack初体验：

准备工作：

Webpack是一个现代JavaScript应用程序的静态模块打包工具： 也就是说，它本质是对一个已存在项目Project

进行工程化+打包的工具，本质属于一个NPM工具，并对完整项目进行依赖管理；所以我们需要一个小Demo：

  • 新建项目文件夹 Webpack_Project： npm init -y 初始化包环境，得到 package.json 文件；

  • 新建 src 源代码文件夹： utils/check.js 封装用户名和密码长度函数、引入到 src/index.js 进行使用；

    src/utils/check.js 封装并暴漏校验手机号长度和校验验证码长度的函数

    //封装并暴漏校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

    src/index.js 引入并使用 /utils/checkJS文件暴漏函数

    /**体验 webpack 打包过程 
*   indexJS中引入并使用 /utils/checkJS文件暴漏函数 */
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))

WebPack打包管理：

下载 webpack webpack-cli 到项目中，为了方便管理，不同项目版本，所以独立安装webPack⬇️

npm i webpack webpack-cli --save-dev
#webpack是NPM全局软件包:是命令工具,为了保证项目之间版本分别独立,通常安装在项目dev模块中;
#下载到项目环境下,并把webpack命令配置到 package.json的scripts自定义命令;
  • 解释： package.json的scripts 属性，支持自定义命令方便开发者指向："scripts": { "build": "webpack" },

项目中运行工具命令： WebPack自动产生 dist 文件夹: 压缩和优化后，最终运行的代码)

WebPack打包disc文件夹：

在使用Webpack进行打包时，通常会将打包后的文件输出到一个名为dist的文件夹中：

通过观察发现，上述的WebPack_Project项目被翻译为: main.JS

(()=>{"use strict";console.log(!0),console.log(!1)})();
  • WebPack 通过一些配置生成，发现WebPack_Projetc 最终的结果就是返回输出：true,false
  • 于是在disc文件夹——main.JS中，直接将运行结果进行输出，大大节省了进一步函数运算、引用的消耗；

🆗，经过上述案例，大致了解到了WebPack基本使用，它就是对项目工程进行打包翻译使其更加简洁高效的进行部署运维

注意：Webpack 默认入口和出口分别为： src/index.js 、dist/main.js 但WebPack支持通过配置进行管理出入口等功能；

修改WebPack打包出入口：

要修改Webpack的打包出入口： 需要编辑webpack.config.js文件；

这个文件是Webpack的配置文件，它告诉Webpack如何执行任务，设置入口文件、出口文件等配置；

根目录新建 webpack.config.js配置文件📄：设置入口和出口： 更多配置请关注 WebPack 中文文档🔗

//为方便管理引入Node 文件资源管理模块;
const path = require('path');//WebPack配置:
module.exports = {entry: path.resolve(__dirname, 'src/index.js'),output: {clean: true,                                //打包之前清空输出目录webpack5.0版本新增;path: path.resolve(__dirname, 'dist'),      //resolve nodeJS中拼接路径的一个函数;filename: './login/index.js'                //__dirname 执行文件所在的绝对路径;}
}
  • entry 属性定义了Webpack打包的入口文件路径；
  • output 对象定义了打包后的输出路径path和文件名filename；

WebPack 自动生成 html 文件

WebPack本身并没有直接处理HTML文件的能力： 它主要是一个JavaScript模块打包工具，

所以： 如果想要将项目中的HTML文件，内自动的引入打包后的JS，还需要手动的进行修改；

🆗，上述我们发现原生 登录页面.html 中直接引入index.JS

  • 因为：内部引用util包JS文件，部分浏览器支持ES6+语法，导致报错！！
  • 后通过WebPack将JS进行打包，登录页面重新引入dist/login/index.JS，如此操作完成JS导入

那么WabPack 打包工具可以直接一键打包HTML，并根据HTML中的<script>块，自动配置管理JS文件吗？

插件 html-webpack-plugin

HtmlWebpackPlugin | webpack 中文文档

html-webpack-plugin 是一个用于生成 HTML 文件的 Webpack 插件，

它简化了为 Webpack 打包的文件创建 HTML 文件的过程，特别适用于那些文件名中包含哈希值的情况

这个插件会自动将打包后的 JavaScript 文件引入到生成的 HTML 文件中，从而确保你的 HTML 文件始终引用最新的打包结果

NPM安装插件：

下载 html-webpack-plugin 本地软件包到项目中： npm i html-webpack-plugin --save-dev

配置 webpack.config.js

//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//WebPack配置:
module.exports = {entry: path.resolve(__dirname, 'src/index.js'),output: {clean: true,path: path.resolve(__dirname, 'dist'),filename: './login/index.js'                },plugins: [    //插件:给Webpack提供更多功能;new HtmlWebpackPlugin({template: path.resolve(__dirname,'public/login.html'),  // 模板文件filename: path.resolve(__dirname,'dist/login.html'),    // 输出文件})]
}

Webpack-打包 css 代码

要使用Webpack打包CSS代码，你需要配置一些loader加载器：

Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器；

需要的 2 个加载器来辅助 Webpack 才能打包 css 代码： 使用时候要注意加载器版本，和WebPack的版本一致；

  • 加载器 css-loader：解析 css 代码

  • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

加载器和插件的区别： Webpack中，插件plugins、加载器loaders 是两个非常重要的概念：

  • 加载器 的主要作用是转换文件，在Webpack配置文件的module.rules中配置：

    它们可以将不同类型的文件如：CSS、图片、TypeScript等，转换为Webpack可以理解和处理的模块；

  • 插件 的作用更为广泛，它们可以扩展Webpack的功能，并在Webpack的整个构建过程中执行各种任务

    插件可以用于打包优化、资源管理、环境变量注入等，在Webpack配置文件的plugins数组中配置；

准备工作： 定义login 页面的 .css 样式；

加载器css-loader、style-loader

①：NPM 安装加载器： 使用时候要注意加载器版本，和WebPack的版本一致，NPM默认情况安装最新版本；

#下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev

②：因为：WebPack主要是针对，JS的操作，所以如果需要管理CSS，需要在对应.JS中引入CSS

③：最后配置： webpack.config.js

  • 注意：use:[] 中的顺序不能随意修改：

    WebPack是按use:[]顺序加载： css-loader -> style-loader 顺序错了会导致，编译错误；

//... 省略部分配置;
module:{      //加载器: rules: [    //规则列表: {test: /\.css$/i,                        //匹配所有的 .css 文件use: ['style-loader', "css-loader"],    //使用从后到前的加载器来解析 css 代码和插入到 DOM}],
}

优化-提取 css 代码

上述我们实现了，将CSS进行WebPack管理：

but，好像效果并不是很满意，CSS和JS代码深度耦合在一起，虽然部署不受影响，但还可以优化： 将CSS、JS文件拆分；

  • CSS 文件可以被浏览器缓存，减少 JS 文件体积，且浏览器并行下载JS、CSS文件，提高网页加载效率；

mini-css-extract-plugin 插件

mini-css-extract-plugin 是一个用于将CSS代码从JavaScript中分离出来，并生成单独CSS文件的Webpack插件；

它的主要作用是优化和管理CSS文件，使得CSS代码可以被浏览器缓存，从而提高页面加载速度和性能

安装插件： npm i --save-dev mini-css-extract-plugin 注意版本问题；

注意： mini-css-extract-plugin 不能和 style-loader 同时使用；

配置 webpack.config.js

  • ①：引入定义require('mini-css-extract-plugin') 模块；
  • ②：在Plugins:[ new MiniCssExtractPlugin()，] 中定义插件；
  • ③：在module:{ rules:[ {},{} ] } 中设置定义加载器、插件配置；
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//WebPack配置:
module.exports = {plugins: [    //插件: 给Webpack提供更多功能;//... 省略部分代码new MiniCssExtractPlugin(),],module:{      //加载器: rules: [    //规则列表: //... 省略部分代码    //优化-提取 css 代码{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],     //mini-css-extract-plugin不能和style-loader同时使用}],}
}


关于HTML页面如何确认CSS文件：

因为HTML中固定了JS的文件引用，JS中有导入CSS的引用，

所以插件根据JS确认，CSS属于某个HTML页面进行渲染<link/> 引入；

优化压缩CSS：

🆗，上述成功的分离了CSS和JS，但CSS的文件并没有压缩，所以还可以优化： 当然也还需要添加插件

css-minimizer-webpack-plugin

css-minimizer-webpack-plugin： 是一个用于优化和压缩CSS代码的Webpack插件：

  • 优化和压缩CSS：使用cssnano来优化和压缩CSS代码，减少文件大小，提高加载速度
  • 支持source maps：能够生成和处理source maps，帮助调试压缩后的CSS代码
  • 并行处理：支持多进程并行处理，提升构建速度
  • 缓存：支持缓存机制，进一步提高构建效率

NPM下载插件：

npm i css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js

在webpack.config.js文件中引入并配置css-minimizer-webpack-plugin

  • optimization 配置项：用于自定义和控制打包过程中的各种优化策略；
  • minimize: 启用或禁用代码压缩、指定压缩代码的插件；
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');//WebPack配置:
module.exports = {//... 省略部分代码optimization:{  //优化minimizer: [  //最小化配置`...`,new CssMinimizerPlugin(),       //使用CssMinimizerPlugin进行CSS压缩//在webpack@5中，你可以使用 `...` 扩展现有的 minimizer即terser-webpack-plugin)//将下一行取消注释保证js代码还能压缩)]}
}

打包Less代码：

为了方便CSS编写，现在很多前端都使用Less了：什么是Less：

  • Less Leaner Style Sheets的缩写，是一种CSS预处理语言，它扩展了CSS的功能，使得样式表的编写更加灵活和强大
  • Less引入了变量、嵌套、混合（mixins）、函数等特性，简化了CSS的编写和维护，
  • 本人并非纯前端就不过多介绍了

那么如何使用WebPack管理Less文件呢？ 需要配置一些loader和插件….

加载器 less-loader

less-loader 是一个Webpack加载器，用于将Less文件编译为CSS：

支持Less特性：支持Less的变量、嵌套、混合、函数等特性，配置选项：可以通过lessOptions配置Less编译的选项；

#NPM安装依赖：
npm i less less-loader --save-dev#less-loader 需要配合 css-loader和style-loader一起使用:
npm i css-loader style-loader --save-dev#因为实际开发很多场景,需要将文件进行分离mini-css-extract-plugin
npm i --save-dev mini-css-extract-plugin		#不能和style-loader一起使用;
npm i css-minimizer-webpack-plugin --save-dev	#进一步优化压缩翻译后的css文件;

编写Less、并引入JS：

login.less： 给登录页面添加背景图片的CSS样式；

html {body {background: url('./assets/login-bg.png') no-repeat center/cover;}
}

在JS文件中引入less文件： import '../public/login.less'; WebPack也就是依赖这个找到对应CSS、Less；

配置 webpack.config.js

//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');//WebPack配置:
module.exports = {//... 省略部分代码module:{        //加载器: rules: [      //规则列表: //优化-提取 css 代码{test: /\.css$/i,                                      //匹配所有的 .css 文件use: [MiniCssExtractPlugin.loader, "css-loader"],},//打包Less代码{test: /\.less$/i,                                                 //匹配所有的 .less 文件use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],  //按顺序加载器转换匹配文件类型}],},
}

Webpack-打包 图片

关于WebPack打包图片，上述案例，并没有配置：我们发现WebPack自动进行了管理：

因为：WebPack5 内置了资源模块的打包，无需下载额外 loader： 可以更简单地处理图片等资源文件；

配置 webpack.config.js

//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');//WebPack配置:
module.exports = {//... 省略部分代码module:{        //加载器: rules: [      //规则列表: //优化-提取 css 代码{test: /\.css$/i,                                      //匹配所有的 .css 文件use: [MiniCssExtractPlugin.loader, "css-loader"],},//打包Less代码{test: /\.less$/i,                                                 //匹配所有的 .less 文件use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],  //按顺序加载器转换匹配文件类型}//打包图片{type: 'asset',                                                    //资源模块类型(固定)test: /\.(png|jpg|jpeg|gif)$/i,                                   //匹配全类型图片文件generator: {                                                      filename: 'assets/[hash][ext][query]'                           //输出文件名及路径}}],},
}

资源模块类型：

资源模块类型Asset Module Type 是 webpack 5 引入的一种新特性

用于处理资源文件如图片、字体等，而无需额外配置 loader，它通过添加四种新的模块类型，替代了传统的 loader

  • asset/resource：将资源打包成一个单独的文件并导出该文件的 URL，之前通过使用 file-loader 实现

  • asset/inline：将资源打包成 data URIbase64，之前通过使用 url-loader 实现

  • asset/source：导出资源的源代码，之前通过使用 raw-loader 实现

  • asset：可以根据资源大小自动选择将资源打包成：建议使用

    判断临界值默认为 8KB： >8转存图片地址、<8将图片转换base64至JS中转储

    单独的文件、还是data URI： 之前通过使用 url-loader，并通过配置限制资源体积实现；

输出文件名及路径(占位符)： filename: 'assets/[hash][ext][query]' 表示输出在：assets目录下

/[...][...][...]，占位符： 表示扩展额外的图片处理操作，操作可选，不同参数含义不同；

  • [hash] 使用文件内容的哈希值生成唯一的文件名，防止缓存问题；

    ：多个相同图片名称不同，哈希之后成为一个图片节省磁盘空间；

    ：多个相同文件名，哈希之后避免重名冲突渲染问题；

  • [ext] 保留文件的原始扩展名，如： .png、.jpg、...

  • [query] 保留文件的查询参数，对于对象存储OSS服务器 可以通过参数进行图片的渲染；

WebPack4对于图片处理，还需安装插件、加载器，因为已经不经常使用就不介绍了/

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 什么是diff算法？
  • C++20中的constinit说明符
  • 【数据结构】二叉树———Lesson2
  • 十七、【文本编辑器(三)】图像坐标变换
  • 低代码中间件学习体验分享：业务系统的创新引擎
  • 从 Pandas 到 Polars 十八：数据科学 2025，对未来几年内数据科学领域发展的预测或展望
  • 云监控（华为） | 实训学习day2（10）
  • Eclipse 内容辅助
  • 微信小程序学习之旅
  • 【iOS】—— 消息传递和消息转发
  • 团队高效地使用 Git 进行协同开发
  • 【常见开源库的二次开发】基于openssl的加密与解密——MD5算法源码解析（六）
  • Axure中继器进阶指南：打造专业级交互
  • ＜数据集＞UA-DETRAC车辆识别数据集＜目标检测＞
  • 【已解决】Django连接MySQL启动报错Did you install mysqlclient?
  • 【译】JS基础算法脚本：字符串结尾
  • 《深入 React 技术栈》
  • 【跃迁之路】【699天】程序员高效学习方法论探索系列（实验阶段456-2019.1.19）...
  • crontab执行失败的多种原因
  • EventListener原理
  • javascript数组去重/查找/插入/删除
  • Laravel Telescope：优雅的应用调试工具
  • Vue 动态创建 component
  • windows下如何用phpstorm同步测试服务器
  • 阿里云Kubernetes容器服务上体验Knative
  • 大主子表关联的性能优化方法
  • 记录：CentOS7.2配置LNMP环境记录
  • 跨域
  • 前端学习笔记之观察者模式
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 如何用vue打造一个移动端音乐播放器
  • 吐槽Javascript系列二：数组中的splice和slice方法
  • 微信小程序--------语音识别（前端自己也能玩）
  • 小程序button引导用户授权
  • 学习Vue.js的五个小例子
  • 一起来学SpringBoot | 第十篇：使用Spring Cache集成Redis
  • 源码安装memcached和php memcache扩展
  • Semaphore
  • 进程与线程（三）——进程/线程间通信
  • 曜石科技宣布获得千万级天使轮投资，全方面布局电竞产业链 ...
  • #Ubuntu（修改root信息）
  • $.ajax()参数及用法
  • $.ajax中的eval及dataType
  • （12）Linux 常见的三种进程状态
  • （C语言）球球大作战
  • （Java）【深基9.例1】选举学生会
  • (LLM) 很笨
  • (Matlab)基于蝙蝠算法实现电力系统经济调度
  • （PADS学习）第二章：原理图绘制 第一部分
  • （附源码）springboot工单管理系统 毕业设计 964158
  • （附源码）springboot教学评价 毕业设计 641310
  • （七）Knockout 创建自定义绑定
  • (转)母版页和相对路径
  • (转载)Linux 多线程条件变量同步
  • *（长期更新）软考网络工程师学习笔记——Section 22 无线局域网