Webpack入门基础知识及案例

webpack相信大家都已经不陌生了,应用程序的静态模块打包工具。前面我们总结了vue,react入门基础知识,也分别做了vue3的实战小案例,react的实战案例,那么我们如何使用webpack对项目进行模块化打包呢? 话不多说,开始!!

目录

一、熟悉webpack的主要功能

二、Webpack的核心概念

三、使用webpack5搭建脚手架

1.然后执行npm init 进行初始化, npm install webpack webpack-cli

2.在项目src文件夹下新建main.js和 tools>index.js文件

3.打包index.html文件

 4.打包css文件。如果我们想创建一个css呢?

5.如何处理图像资源呢?

 6.babel的转化

 7.处理.vue结尾的文件

 8.如何自动运行打包后的index文件


一、熟悉webpack的主要功能

1. 模块打包:将项目中的所有模块(JavaScript、CSS、图片等)当作一个整体,通过依赖关系将它们打包成一个或多个静态资源文件

2.依赖管理:Webpack可以分析模块之间的依赖关系,根据配置的入口文件找出所有依赖的模块,并将其整合到打包结果中

3.文件转换Webpack本身只能处理JavaScript模块,但通过加载器(Loader)的使用,可以将其他类型的文件(如CSS、LESS、图片等)转换为有效的模块,使其能够被打包到最终的结果中

4.代码拆分:Webpack支持将代码拆分成多个模块,按需加载,实现按需加载和提升应用性能

5.插件系统:Webpack提供了丰富的插件系统,可以通过插件实现各种功能的扩展,例如压缩代码、自动生成HTML文件等

总之,Webpack的主要功能是将项目中的多个模块打包成一个或多个静态资源文件,并提供了丰富的功能和插件系统来满足前端开发的需求

二、Webpack的核心概念

Webpack的核心概念包括entry(入口)、output(输出)、loader(加载器)和plugin(插件)

1.Entry 【入口文件】, 指定Webpack的入口文件,Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件;

2.Output【输出】义打包输出的文件及路径,指定Webpack打包后的文件输出的路径和文件名

3.Loader【加载器】Webpack本身只能处理JavaScript模块,但通过Loader的使用,可以处理其他类型的文件(如CSS、LESS、图片等)

4.Plugin【插件】 插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如,可以使用插件来压缩代码、拆分代码、生成HTML文件等。插件通过在Webpack配置中引入并实例化,然后将其添加到plugins数组中。

三、使用webpack5搭建脚手架

1.然后执行npm init 进行初始化, npm install webpack webpack-cli
npm init //初始化
 npm install webpack webpack-cli  //安装webpack以及webpack-cli依赖包

 查看项目package.json文件 已经有webpack相关版本信息 

2.在项目src文件夹下新建main.js和 tools>index.js文件

main文件内容

// mian.js文件
import {add} from '/src/tools/index'
console.log(add(2,3));

修改我们public文件夹下的index.html 文件

在根目录新建 webpack.config.js文件 配置初入口文件信息

//webpack.config.js文件
const path = require("path")module.exports = {mode: 'development', // 指定为开发模式// 入口文件entry: {main: './src/main.js'},// 出口文件output: {// 输出到dist文件夹(打包自动生成)path: path.resolve(__dirname, 'dist'), // __dirname:表示当前文件的绝对路径(根目录)// 输出文件名在dist文件夹里的js文件夹的chunk.js下filename: 'js/chunk-[contenthash].js' // 使用由生成的内容产生的 hash}
}

修改package.json文件 我们创建了webpack的打包命令

现在试着在终端输入 npm run build 命令

npm run build

这里可以看到dist文件夹下已经生成了打包好的文件。 

可以发现对比传统脚手架的npm run build,我们自己搭建的脚手架并没有在dist文件夹里生成index.html文件,现在我们来试试吧!

3.打包index.html文件

3.1安装插件 npm install html-webpack-plugin -D

npm install html-webpack-plugin -D

在webpack.config.js文件中引入插件,并且配置插件相关信息如下: 

现在我们把dist/js下的文件删掉,然后重新打包 可以看到我们已经生成html文件了

 4.打包css文件。如果我们想创建一个css呢?

在src>style>style.css 文件

这里是main.js文件,引入样式文件以及向html添加了内容。 

//main.js
import './style/style.css'
const el = document.createElement('div')
el.className = 'title'
el.innerHTML = "这是坚强的土豆子"
document.body.appendChild(el)

安装打包css文件的依赖文件  npm install css-loader style-loader

npm install css-loader style-loader

在webpack.congfig文件中配置信息 

再次执行 npm run build,然后index.html文件浏览器打开,可以看到我们刚才加载的css效果了。

 一些常用的Webpack loader:

  1. babel-loader:将ES6+代码转换为ES5语法,以便在旧版本的浏览器中运行。
  2. style-loader 和 css-loader:用于处理CSS文件。css-loader主要负责处理样式文件中的importurl语句,而style-loader将转换后的CSS模块直接注入到HTML页面中。
  3. file-loader 和 url-loader:用于处理图片和其他资源文件。file-loader会为每一个文件生成一个对应的文件,而url-loader将小于设定大小的文件转换为base64编码的URL,减少HTTP请求
  4. sass-loader 和 less-loader:用于处理Sass和Less预处理器。它们将Sass和Less代码转换为普通的CSS代码
  5. postcss-loader:用于为CSS代码添加浏览器兼容性前缀,以确保在不同浏览器上的一致性。
  6. html-loader:用于处理HTML文件,将其中的图片等资源转换为Webpack可以识别的模块。

同理我们如果使用less,也需要先下载less-loader。

新建style.less文件 ,同时哦在main.js文件中引入 文件

//main.js文件添加
import './style/style.less'

webpack.config.js中配置信息。 

注意:下图 webpack.config文件less配置信息部分 options默认是部分css3属性需要通过postcss-loaderpostcss-preset-env才能添加浏览器兼容性前缀,以确保在不同浏览器上的一致性。

需要先下载安装 postcss-loaderpostcss-preset-env

npm install postcss-loader postcss-preset-env -D

执行npm run build ,浏览器打开发现文字内容字体已经按照我们设置的改变了

 

5.如何处理图像资源呢?

 在src>img>下导入一张png图片,并在main.js文件中导入图片在html中显示

 在webpack文件中进行配置信息,在webpack4版本中(webpack5版本不用这一步)

npm i file-loader url-loader -D

我们webpack5版本只需要在webpack.config文件中添加配置:

重新打包运行 npm run build ,可以看到我们刚刚加入的图片信息了。

 每次运行打包命令后自动覆盖原来的文件js文件信息。

webpack.config.js文件出口文件设置添加clean:设置为true就可以了。这样每次打包后的文件只有一个最新的。

 6.babel的转化

es6+的语法在旧浏览器不适用,这就需要我们自己去转化成浏览器能识别的es5代码

npm install @babel/core @babel/preset-env babel-loader -D

但在高版本的bebel中,我们可以在根目录建一个babel.config.js。webpack.config.js只需要下图配置。

 7.处理.vue结尾的文件

新建vue页面,并在main.js中引入

1、下载安装 npm i vue vue-loader -D

2、 配置webpack.config.js文件

 

重新通过npm run build运行之后,index.html页面成功响应:

 8.如何自动运行打包后的index文件

如何使用npm run serve 运行项目的。需要先安装依赖:

npm i webpack-dev-server -D

接下来我们把package.json中的运行命令改成如下这样:

然后我们就可以用npm run serve启动项目了。

 

可以看到直接访就可以了,我们修改了msg的值,页面会自动刷新。

 好啦,我们现在已经成功搭建了一个脚手架。

关于webpack的其他知识后续会更新。

Node.js基础知识请参考:Express基于Node.js基础知识【2】全面总结 推荐-CSDN博客


 

 

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

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

相关文章

路由器IP互联无线对讲系统解决方案

一、项目概况 随着信息化的全面深入发展,各行各业的通信需求日益增长,传统的通信方式无法满足跨网络、跨系统、跨媒介的通信互联互通,打破信息孤岛、提高协同效率,成为当前各行业融合通信的首要任务。尤其大型企业、学校、医院等…

模型优化学习笔记—对比各种梯度下降算法

import mathimport numpy as np from opt_utils import * import matplotlib.pyplot as plt# 标准梯度下降 def update_parameters_with_gd(parameters, grads, learning_rate):L len(parameters) // 2for l in range(1, L 1):parameters[f"W{l}"] parameters[f&q…

自己动手实现scikit库中的fit和transform方法

文本分析第一步要解决的是如何将文本非结构化信息转化为结构化信息,其中最关键的是特征抽取,我们使用scikit-learn库fit和tranform方法实现了文本数据的特征抽取。 但是对于fit和transform,大家可能还是有点迷糊。最近又将《Applied Text An…

如何用一个以太网回环短接器激活以太网接口:以太网短接口制作

在非常特殊的情况下,我们需要在没有接以太网的情况下,使用本地的以太网(有些程序、代码必须上网才能运行)。这时候需要插上一个以太网短接口,骗系统已经插上网线。 制作以太网短接口 以太网短接口的制作非常简单&…

Linux OS:基于阻塞队列的生产者消费者模型

Linux OS:基于阻塞队列的生产者消费者模型 前言一、阻塞队列的大致框架二、生产者向阻塞队列中生产数据三、消费者获取阻塞队列中数据四、总体生产和消费思路及测试代码4.1 单生产单消费4.2 多生产多消费 五、所以代码 前言 阻塞队列是一种常用于实现生产者消费者模…

低代码: 系统开发准备之确定一般开发流程,需求分析,复杂度分析,标准开发流程

概述 低代码系统开发之前,我们首先要进行一些准备我们首先知道我们软件开发的一般流程同时,我们还要知道,我们整个系统平台的需求如何之后,我们要基于需求进行设计,包含UI设计与系统架构设计 一般开发流程 系统开发…

电路中电阻,电容和电感作用总结

电阻作用 1,上拉电阻 电阻的连接一般是一端接上拉的电源(一般与芯片信号的电压值相匹配),另一端连接芯片引脚所对应的信号大概如下图 功能:一、预置某些引脚的功能,例如复位信号拉高(失能&…

在 VueJS 中使用事件委托处理点击事件(事件委托,vue事件委托,什么是事件委托,什么是vue的事件委托)

前言 在开发 Vue 项目时,我们经常需要处理大量的点击事件。为每个可点击的元素单独添加事件监听器不仅会增加代码的复杂度,还会降低性能。事件委托是一种有效的优化方式,它可以显著减少事件监听器的数量,提高代码的可维护性和执行…

用Python+selenium实现一个自动化测试脚本

一,安装Python. python官方下载地址:Download Python | Python.org 安装后点击开始菜单,在菜单最上面能找到IDLE. IDLE是python自带的shell, 点击打开, 即可开始编写python脚本了. 二,安装selenium 上面python已安装完成,接下来安装selenium. 安装selenium之前需要…

P1105 平台

平台 题目描述 空间中有一些平台。给出每个平台的位置,请你计算从每一个平台的边缘落下之后会落到哪一个平台上。 注意,如果某两个平台的某个两边缘横坐标相同,物体从上面那个平台落下之后将不会落在下面那个平台上(即平台的范…

网络工具(Netcat、iPerf)

目录 1. Netcat2. iPerf 1. Netcat Netcat 是一款简单的 Unix 工具,常用于测试 UDP 和 TCP 连接。 https://www.cnblogs.com/yywf/p/18154209 https://eternallybored.org/misc/netcat/ https://nmap.org/download.html 创建UDP监听端 nc -u -l localPort 创建UDP…

业务开发之用户管理(七)

云风网 云风笔记 云风知识库 首先从逻辑上,用户管理只限制admin用户显示 一、路由限制用户管理的访问权限 config/routes.ts添加access:admin权限限制 {name: userManage,icon: table,access: canAdmin,path: /userManage,component: ./userManage,}二…

Flink 实时数仓(四)【DWD 层搭建(二)流量域事实表】

前言 昨天刚搬到新校区,新校区小的可怜,好在之后出去实习交通可以方便点;待在学院太受限了,早点离开! 今天开始完成 DWD 层剩余的需求,上一节我们把日志数据根据不同类型分流写入到了不同的主题&#xff1b…

云端医疗解决方案:互联网医院系统的云计算架构与实现

随着云计算技术的成熟和普及,医疗行业开始探索云端解决方案,以应对数据存储、计算能力和系统扩展性等方面的挑战。互联网医院系统作为医疗信息化的重要组成部分,通过云计算架构实现了高效、灵活和可扩展的医疗服务。本文将深入探讨互联网医院…

2024 AI开发者大赛火热进行中!

“iFLYTEK AI 开发者大赛”是由科大讯飞发起,中国信息协会联合主办的人工智能竞赛平台,汇聚产学研各界力量,面向全球开发者发起数据算法及创新应用类挑战,推动人工智能前沿科学研究和创新成果转化,培育人工智能产业人才…

YOLOv10改进 | 主干篇 | YOLOv10引入CVPR2023 顶会论文BiFormer用于主干修改

1. 使用之前用于注意力的BiFormer在这里用于主干修改。 YOLOv10改进 | 注意力篇 | YOLOv10引入BiFormer注意力机制 2. 核心代码 from collections import OrderedDict from functools import partial from typing import Optional, Union import torch import torch.nn as n…

如何评估并选择最佳的国内项目管理软件?

国内外主流的10款国内项目管理软件对比:PingCode、Worktile、Jira 、Basecamp、Trello、Asana 、Wrike、Tower 、禅道、Teambition 。 在选择适合自己企业的项目管理软件时,很多人会感到无从下手,担心无法找到既符合预算又能满足团队需求的解…

上网防泄密,这些雷区不要碰!九招教你如何防泄密

李明:“最近看到不少关于信息泄露的新闻,真是让人担忧。咱们在工作中,稍有不慎就可能触碰到泄密的雷区啊。” 王芳:“确实,网络安全无小事。尤其是我们这种经常需要处理敏感信息的岗位,更得小心谨慎。那你…

一行代码教你使用Python制作炫酷二维码

二维码,我们日常生活中随处可见的编码方式,凭借其方便快捷的信息承载能力,已经渗透到各行各业。 MyQR 的介绍 MyQR 是一个 Python 库,用于生成自定义二维码,包括带有 Logo、彩色和动态的二维码。它基于 Python 的 qr…

书生大模型实战营第三期——入门岛——Git基础知识

第三关:Git基础知识 任务如下: 任务描述 破冰活动:自我介绍 每位参与者提交一份自我介绍。 提交地址:GitHub - InternLM/Tutorial: LLM&VLM Tutorial 的 camp3 分支~实践项目:构建个人项目 创建一个个人…