webpack的基本介绍与使用

webpack基本介绍及其基础案例

概念

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

基础案例

接下里我将展示一个最基础的案例。

直接运行

首先我们新建一个项目，然后在项目中进行一些基本的操作，然后在文件中引入，看看浏览器能否识别。

utils>count.js 用于定义一个基本的相加函数并返回结果。

pages>index.js 用es6语法引入函数，使用并打印出来。

public>index.htmi 入口文件，用于引入并运行js脚本。

这时候直接运行，浏览器就会报错。因为浏览器识别不了es6语法，因此webpack就派上用场了。

使用webpack打包后运行

初始化项目

 npm init -y

安装webpack依赖

npm install --save-dev webpack webpack-cli

配置webpack文件

在根目录下创建webpack.config.js文件。并填写一些基本的信息。

这里这些配置的信息我先不做过多解释，后面的内容我会对其进行详细解析。

const path = require('path');module.exports = {entry: './pages/index.js', // 指定入口文件output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') // 输出文件的目录}
};
运行webpack

npx webpack

重新运行项目

将打包后的文件地址引入到该文件中。

 可以看到这时候浏览器就已经能够正常的输出打印信息了，这也标志着webpack使用的成功。

webpack五大核心概念及其应用

五大核心概念

Entry（入口）：指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。（从那个文件开始打包）

Output（输出）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。（输出到哪里如何命名）

Loaders（加载器）：让 webpack 处理那些非 JavaScript 文件（如 CSS、图片、TypeScript 等）。

Plugins（插件）：用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量。（拓展功能）

Mode（模式）：指示 webpack 使用相应模式的内置优化（development开发模式, production生产模式）

Loaders概念应用

编写基本配置文件

这里有两个点需要注意的点：

  1. entry是相对路径
  2. output.path是绝对路径，使用的是node.js中的path语法专门用来处理路径问题。
const path = require('path');module.exports = {// 入口entry: './pages/index.js', //相对路径// 输出output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: []}// 插件plugins:[],// 模式mode: 'development',};

处理css文件

下载loader

webpack本身不能够处理css文件，所以我们需要通过loader来帮助webpack解析样式资源。

npm i css-loader style-loader -D

css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块.

style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容。

使用loader

创建一个项目，目录如下，并新建一个css文件。

并在入口文件中引入。

在index.html文件中 使用对应的class 

配置webpack文件

这里需要注意的是use里的loader执行顺序是从右到左。

使用效果前后对比

未引入loader时打包报错，终端提示您需要下载一个loader以用于处理css文件。（失败）

引入loader后打包成功，并在页面上对应的div上显示。（成功）

处理less文件

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i less-loader less -D

less-loader :  负责将 Less 文件编译成 Css 文件。

使用loader

手写less 文件

.box2{height: 100px;width: 100px;background-color: purple;
}
更改webpack配置
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},]},// 插件plugins:[],// 模式mode: 'development',};
使用效果前后对比

打包失败

打包成功并正常显示。 

处理sass文件

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i sass-loader sass -D
使用loader

添加文件（sass,scss）

index.sass

.box3width: 100pxheight: 100pxbackground-color: hotpink

index.scss

.box4 {width: 100px;height: 100px;background-color: lightpink;
}
更改配置
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},]},// 插件plugins:[],// 模式mode: 'development',};
使用效果前后对比

处理stylus资源

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i stylus stylus-loader -D
使用loader

index.stylu

.box5width 100px height 100px background-color red
webpack配置
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},]},// 插件plugins:[],// 模式mode: 'development',};
使用效果前后对比

处理图片资源

下载loader

在 Webpack4 时，处理图片资源通过 file-loader 和 url-loader 进行处理,

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

使用loader
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",},]},// 插件plugins:[],// 模式mode: 'development',};
使用效果前后对比

图片资源优化
const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片会被base64处理}}},],},plugins: [],mode: "development",
};

parser.dataUrlCondition.maxSize 将小于某个大小的图片转化成 data URI 形式（Base64 格式），这样可以减少请求次数，但相应的打包后的文件体积也将变大。

处理字体图标资源

下载字体图标

这里就不过多赘述了，就是上这个图标库下载一些图标。

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/

配置webpack

这里需要注意的是 type 属性用的不是asset，而是asset/resource，asset是转bas64 但asset/resource不转，而是直接输出原文件。

const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'static/js/main.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},]},// 插件plugins:[],// 模式mode: 'development',};
成功示例

更改输出资源的名称和路径

配置webpack
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'static/js/main.js', // 打包后的文件名path: path.resolve(__dirname, 'dist') //绝对路径},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},]},// 插件plugins:[],// 模式mode: 'development',};

output.filename   更改入口文件的输出位置

generator.filename  更改某种资源的输出位置

输出文件

可以看到入口文件更改到static>js

图片位置更改为static>imgs

自动清空上次打包资源

webpack配置
const path = require('path');module.exports = {// 入口entry: './index.js', //相对路径// 输出output: {filename: 'static/js/main.js', // 打包后的文件名path: path.resolve(__dirname, 'dist'), //绝对路径clean: true,// 自动将上次打包目录资源清空},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},]},// 插件plugins:[],// 模式mode: 'development',};

output.clean   清除上一次打包的代码

webpack开发服务器以及自动化

下载命令
npm i webpack-dev-server -D
webpack配置
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {cache: {type: 'filesystem',buildDependencies: {config: [__filename],},},// 入口entry: './index.js', //相对路径// 输出output: {filename: 'static/js/main.js', // 打包后的文件名path: path.resolve(__dirname, 'dist'), //绝对路径clean: true,// 自动将上次打包目录资源清空},// 加载器module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},}]},devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},// 插件plugins:[new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),}),],// 模式mode: 'development',};
启动命令
npx webpack serve
 成功示例

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

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

相关文章

学习记录day16—— 数据结构 双向链表 循环链表

学习记录day16—— 数据结构 双向链表 循环链表

双向链表 1、概念 1）就是从任意一个节点既能存储其前驱节点，又能存储后继节点 2)结构体中增加一个指向前驱节点的指针 //定义数据类型 typedef int datatype;//定义节点类型 typedef struct Node {union {int len;datatype data;};struct Node *prio; …
阅读更多...
72 | 数据分析岗位招聘数据可视化

72 | 数据分析岗位招聘数据可视化

项目介绍 本项目旨在通过对智联招聘网站上发布的数据分析岗位信息的分析和可视化，帮助应届毕业生和希望进入数据分析行业的专业人士更好地理解当前的就业市场。通过收集包含职位名称、薪资范围、地点、工作经验、学历要求等关键信息的数据，项目深入探讨了数据分析岗位的多个…
阅读更多...
【大师与bug里特】M_Studio《王国之梦》学习笔记

【大师与bug里特】M_Studio《王国之梦》学习笔记

1️⃣ Object & object(✅) 之辨 《7.泛型事件框架〈余2min左右时〉》 不然inspector窗口的最后一行（告诉我们订阅者是SceneLoadManager它身上挂了☝️ObjectEventListener用来监听这个事件 有多少个事件注册到这里来了都能够看到）还是不会出现 加上…
阅读更多...
【JVM基础05】——组成-能不能解释一下方法区？

【JVM基础05】——组成-能不能解释一下方法区？

目录 1- 引言：方法区概述1-1 方法区是什么？(What)1-2 为什么用方法区？方法区的作用 (Why) 2- ⭐核心：详解方法区(How)2-1 能不能解释一下方法区？2-2 元空间内存溢出问题2-3 什么是常量池？2-4 运行时常量池 …
阅读更多...
接口自动化测试框架实战-2-项目接口文档

接口自动化测试框架实战-2-项目接口文档

上一小节我们完成了项目开发环境的搭建，本小结我们具体介绍一下项目中使用到的接口文档。 本次我们以钉钉开放接口作为项目接口测试的示例，方便大家都能统一学习和调用，具体接口如下： 1、获取企业内部应用的access_token 在获取…
阅读更多...
软件测试---测试需求分析

软件测试---测试需求分析

课程目标 什么是软件测试需求 软件测试需求的必要性 如何对软件测试需求进行分析（重点） 课程补充 灰度测试（基于功能）：先发布部分功能，然后看用户的反馈，再去发布另外一部分的功能更新。 A/B测…
阅读更多...
Domainim：一款高效的企业级网络安全扫描工具

Domainim：一款高效的企业级网络安全扫描工具

关于Domainim Domainim是一款功能强大的企业级网络安全扫描工具，该工具运行效率高，功能完善，可以帮助广大研究人员针对企业或组织网络执行大规模安全扫描任务。 该工具可以快速执行网络安全扫描和域名/子域名网络侦查任务，旨在使…
阅读更多...
Llama 3.1要来啦？！测试性能战胜GPT-4o

Llama 3.1要来啦？！测试性能战胜GPT-4o

哎呀，Meta声称将于今晚发布的Llama 3.1，数小时前就在Hugging Face上泄露出来了？泄露的人很有可能是Meta员工？ 还是先来看泄露出来的llama3.1吧。新的Llama 3.1模型包括8B、70B、405B三个版本。 而经过网友测试，该base…
阅读更多...
Elasticsearch-RestAPI --学习笔记

Elasticsearch-RestAPI --学习笔记

RestAPI ES官方提供了各种不同语言的客户端，用来操作ES。这些客户端的本质就是组装DSL语句，通过http请求发送给ES。 官方文档地址： Elasticsearch Clients | Elastic 以下关于RestAPI 的说明都是基于老版本客户端 初始化RestClient 1&…
阅读更多...
STM32CUBEIDE FreeRTOS操作教程（一）：LED闪灯

STM32CUBEIDE FreeRTOS操作教程（一）：LED闪灯

STM32CUBEIDE FreeRTOS操作教程（一）：LED闪灯 STM32CUBEIDE(不是STM32CUBEMX)开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件，不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开…
阅读更多...
防御课第2次作业

防御课第2次作业

实验拓扑图 实验目的 7，办公区设备可以通过电信链路和移动链路上网(多对多的NAT，并且需要保留一个公网IP不能用来转换) 8，分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 9，多出口环境基于带宽比例进行选…
阅读更多...
内网隧道——HTTP隧道

内网隧道——HTTP隧道

文章目录 一、ReGeorg二、Neo-reGeorg三、Pivotnacci 实验网络拓扑如下： 攻击机kali IP：192.168.111.0 跳板机win7 IP：192.168.111.128，192.168.52.143 靶机win server 2008 IP：192.168.52.138 攻击机与Web服务器彼此之…
阅读更多...
Leetcode3216. 交换后字典序最小的字符串

Leetcode3216. 交换后字典序最小的字符串

Every day a Leetcode 题目来源：3216. 交换后字典序最小的字符串 解法1：模拟 找到第一个 s[i] > s[i 1]，且它们奇偶性相同，交换它们。 代码： /** lc appleetcode.cn id3216 langcpp** [3216] 交换后字典序最小…
阅读更多...
elk日志索引被锁blocks，日志无法写入

elk日志索引被锁blocks，日志无法写入

现象： kafka积压，logstash无法将日志写入到es logstash报错： [logstash.outputs.elasticsearch][main][] Retrying failed action {:status>403 :error>{“type”>“cluster_block_exception”, “reason”>“index [] blocked …
阅读更多...
鸿蒙OpenHarmony Native API【drawing_path.h】 头文件

鸿蒙OpenHarmony Native API【drawing_path.h】 头文件

drawing_path.h Overview Related Modules: [Drawing] Description: 文件中定义了与自定义路径相关的功能函数 Since: 8 Version: 1.0 Summary Functions FunctionDescription[OH_Drawing_PathCreate] (void)[OH_Drawing_Path] * 函数用于创建一个路径对象OH_Drawin…
阅读更多...
怎么查快递和物流到哪里了，快递丢失怎么处理？

怎么查快递和物流到哪里了，快递丢失怎么处理？

随着电子商务的发展，物流也越来越发达，人们的生活中有很多地方都与物流快递打交道。网购或者给远方的亲戚朋友寄礼物等等都需要快递。有时候想要知道快递寄送请款就要查询快递单号，那么，快递单号查询方法有哪些？没有快…
阅读更多...
Django视图与URLs路由详解

Django视图与URLs路由详解

在Django Web框架中，视图（Views）和URLs路由（URL routing）是Web应用开发的核心概念。它们共同负责将用户的请求映射到相应的Python函数，并返回适当的响应。本篇博客将深入探讨Django的视图和URLs路由系统&am…
阅读更多...
搞一个boostrap主题，用django的mtv去对接

搞一个boostrap主题，用django的mtv去对接

nginx的配置,设定这个模板映射的路径 location /assets/{alias /home/luichun/lc/Pyfile/Pyhome/app/statichome_to_nginx/pifu/dist/assets/;}1：设定一个主页的路由【django主要用来设定逻辑】 2：设定主页的响应内容【使用boostrap框架来对前端展示进行…
阅读更多...
《梦醒蝶飞：释放Excel函数与公式的力量》18.2 数据可视化技术

《梦醒蝶飞：释放Excel函数与公式的力量》18.2 数据可视化技术

第18章：创建图表和数据可视化 18.2 数据可视化技术 数据可视化是将数据转化为图形和图表的过程，以便更好地理解和分析数据。有效的数据可视化可以揭示数据的模式、趋势和异常，从而帮助做出更明智的决策。以下将介绍几种常用的数据可视化技术…
阅读更多...
WiFi通信——STM32通过ESP8266-01S与阿里云通信

WiFi通信——STM32通过ESP8266-01S与阿里云通信

嵌入式设计中常用的无线通信方式主要由蓝牙、WiFi、Zigbee、Lora、NB-IOT等等。这些是最常用的，也是在实际项目开发中根据项目的数据通信特点来选择相应的无线通信方式。本设计主要是讲解WiFi在嵌入式开发中的使用。 1. ESP8266-01S烧录固件 WiFi通信的频段和蓝牙一…
阅读更多...
最新文章

Copyright @ 2022~2023