webpack新手入门

news2024/11/25 19:38:23

前言：
如何配置webpack呢？
webpack概念有哪些呢？
怎么快速理解并使用webpack呢？

文章目录

  • 一. 什么是webpack
  • 二. 安装webpack
  • 三. webpack的五个核心概念
  • 四. webpack配置
  • 五. loader加载器
    • 1. css处理
    • 2. 处理文件（图片，文件）
    • 3. 处理sass（新添加）
  • 六. plugin插件
    • 1. html模板插件
    • 2. 清理dist目录
    • 3. 抽出插件(新添加）
  • 七. devServe
  • 八. 特殊标识
  • 九. 优化（新增加）
    • 1. css 压缩
    • 2.js的压缩
  • 十. 目录别名(新增加）
  • 十一. 开发工具(新增加）
  • 十二 . webpack的魔法注释(新添加）
  • 十三. 哈希命名(新增加）
    • 1. contenthash
    • 2. chunkhash
    • 3. hash
  • 十四. 环境变量(新增加）
  • 十五. 不要vue脚手架如何搭建项目？(新增加）
    • 1. 安装
    • 2. 配置
    • 3.js

一. 什么是webpack

  1. webpack是一个前端打包工具，用来处理现代前端错综复杂的依赖关系，生成浏览器可以识别的静态资源。
  2. 解释一下什么叫依赖关系：就是A插件需要B插件，B插件有D插件， F插件又需要A插件
  3. Vue前期脚手架就是用webpack制作 。Vue 开始推荐vite构建工具（更快），现在react脚手架 angular等现代框架的脚手架都是依赖webpack

二. 安装webpack

执行下图的步骤进行安装：

cd / 进入根目录
md pack 创建pack文件夹
cd pack 进入pack文件夹
npm init -y 初始化项目
npm i webpack webpack-cli -D 安装webpack与脚手架

在这里插入图片描述

三. webpack的五个核心概念

  1. entry 入口
    入口就是项目运行的起点 告诉webpack从哪开始打包
  2. output 出口
    出口就是打包好放入哪 filename 文件名 path路径
  3. mode 模式
    产品模式production 开发模式development
  4. loader 加载器
    webpack默认只能加载处理js文件 loader让webpack拥有处理其他文件的能力
  5. plugin 插件
    在webpack运行生命周期过程中做一些其他任务（压缩 清理）

四. webpack配置

默认webpack.config.js配置文件中

  1. 新建配置文件webpack.config.js,
  2. 可以把mode设置为产品模式production
  3. package.json配置serve
  4. 就可以用npm run serve 运行

五. loader加载器

1. css处理

    (1)安装npm i css-loader style-loader -D
    (2)作用：css-loader 处理.css文件 style-loader 把css加载到style标签内

module:{  
 rules:[                                                                                                 		    
	{test:/\.css$/,
	use:["style-loader","css-loader"]}          
       ]        
      }

2. 处理文件（图片，文件）

    (1)安装：npm i file-loader url-loader -D
    (2)作用：加载图片与文件

 {test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
   use:[{  loader:"url-loader",                                                       options:{limit:5000,name:'images/[hash].[ext]'}, 
  }]},

没有安装之前，我们文件夹引入的图片会报错
在这里插入图片描述
安装之后,我们插入的图片会在页面正常显示，dist文件夹里面会自动更新出我们刚才的图片images。当图片小于5000字节的时候 ，转换为base64 （小图片减少一次http请求）
![在这里插入图片描述](https://img-blog.csdnimg.cn/db8c91554d6243958be1efcaeefaeaa3.png
此外，我们也可以引入字体图标
1.导入与字体图标库font
2.index.js配置字体信息

//创建div
var icon=document.createElement("div");
//设置内容
icon.innerHTML=` <span class="iconfont icon-check-circle"></span><span class="iconfont icon-close-circle"></span>`
//插入div icon
document.body.append(icon)

3.导入图标的css
@import url('font/iconfont.css');
4.npm run build 就可以出现字体图标了，然后dist文件夹也会出现font文件夹

3. 处理sass（新添加）

(1)安装： npm i sass sass-loader -D
（注意安装的是sass,写scss后期会报错）
(2)作用：处理scss文件
(3){test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}

六. plugin插件

1. html模板插件

(1) 安装==npm i html-webpack-plugin  -D==
   (2) 作用：生成html模板文件，自动把打包好的js插入到模板文件
(3) 在webpack.confing.js导入                                                                          
  `const HtmlWebpackPlugin=require('html-webpack-plugin')`
   (4) 

  plugins:[                                                                                             
       new HtmlWebpackPlugin({                                                   
         template:'./public/index.html'  })      
         ],

1.新建一个public文件夹，把index.html移入public，不要script标签里的js （就是一个html文件,里面什么都不用写）
2.安装html插件
3.配置文件里面进行配置
4. 最后npm run serve
5. 发现dist文件夹里面多了index.html ( script标签上多了defer="defer"延迟)

2. 清理dist目录

   (1) 安装==npm i clean-webpack-plugin -D==
    (2)作用：打包前删除dist目录
    (3)`const {CleanWebpackPlugin}=require('clean-webpack-plugin')`
   (4) `plugins:[new CleanWebpackPlugin()]`
   npm run build 运行项目 ，我们没有写清理dist目录时，需要每次运行前，删除dist文件夹，这样很麻烦。于是我们安装了清理dist目录的plugin插件。
   这里为了更直观的看到这个插件起作用了，我们把main.js后面添加了hash，运行npm run build 发现dist目录的main后面多了一长串的值。这样就可以看出清理dist目录起作用了。

3. 抽出插件(新添加）

(1)安装： npm i mini-css-extract-plugin -D
(2)作用：把css抽出为一个单独的文件
(3)导入：
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
(4)配置loader
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
(5)实例化插件
new MiniCssExtractPlugin()
可以自定义文件名，下图表示的用哈希值取前七位
img.cn/3c4257f214c64fa788aa5c5f567265ad.png)

七. devServe

(1)安装 npm i webpack-dev-serve -D
(2)作用：开启一个本地服务器

open:true 是否自动打开浏览器
host:“localhost” 域名
port:8080 端口号
hot:true 更新（文件保存，网页自动更新）
package.json
script:(“serve”:webpack serve"}
npm run serve 运行项目里

1.安装 npm i webpack-dev-server -D
2.配置serve:webpack serve
2. 运行npm run serve 会自动打开

八. 特殊标识

[hash] 把内容通过hash算法算出来的一串字符
[hash:7] 取hash字符串前7个
[name] 原文件名称
[ext] 文件的后缀名

九. 优化（新增加）

1. css 压缩

（1）安装：npm i css-minimizer-webpack-plugin -D
（2）导入：const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

2.js的压缩

(1)安装：npm i terser-webpack-plugin -D
(2)导入：const TerserPlugin = require("terser-webpack-plugin");
(3)实现压缩与优化

	optimization: {
    minimize: true, //默认是压缩
    minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
	},

(4)代码分割

		optimization: {
    splitChunks: {
        chunks: "all", 
       // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}

十. 目录别名(新增加）

resolve: {
 // 别名：@代表是 src目录
alias: {
     '@': path.resolve(__dirname, './src'),
 }
    },

十一. 开发工具(新增加）

devtool:"eval-cheap-source-map",
作用，错误与源代码有个一一对应关系

link与script
< script defer src=“”>< /script >
等待页面内容加载好再去加载js
< link href= “” rel=prefetch>
提前预加载css

十二 . webpack的魔法注释(新添加）

魔法注释 
	/* webpackChunkName:"jquery" */
给当前的js 文件命名
 /* webpackPrefetch: true */ 
网络有空闲预加载js

	import(/* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({default:$})=>{
		console.log($);
	})

十三. 哈希命名(新增加）

1. contenthash

内容发生变化 contenthash值才发送变化

2. chunkhash

入口发生变化，当前的文件chunkhashhash会变化

3. hash

只要项目内容发送变化，hash就会变化

01 可以控制浏览器的缓存
当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
02 提供二次加载的速度（有效的控制缓存）

十四. 环境变量(新增加）

  1. 配置：通过环境命令 产品环境 压缩代码，是生产环境不压缩代码，打开devtool
  2. 项目开发中 ，产品环境 baseURL http://dida100.com:8888
    生产环境 baseURL http://localhost:8080
  3. 步骤

    1.npm i cross-env -D
    2.package.json 传参
    "build": "cross-env NODE_ENV=production webpack", "serve": "cross-env NODE_ENV=development webpack serve",
    3. webpack.config.js使用
    mode:process.env.NODE_ENV, devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',
    4. js文件中使用
    var baseURL = ""; if(process.env.NODE_ENV=="production"){ baseURL = "http://dida100.com"; }else{ baseURL = "http://localhost" } console.log("当前环境：",process.env.NODE_ENV,baseURL);

十五. 不要vue脚手架如何搭建项目？(新增加）

面试中经常会问到

1. 安装

	npm i vue -S
	npm i vue-loader  vue-template-compiler vue-hot-reload-api vue-style-loader -D

处理.vue vue-loader
编译vue目录 vue-template-compiler
热更新 vue-hot-reload-api
处理vue 样式vue-style-loader

2. 配置

01 导入
const {VueLoaderPlugin} = require("vue-loader")
02 配置
{test:/\.vue$/,use:["vue-loader"]}
03 插件
plugins:[new VueLoaderPlugin()]

3.js

(1) 模板文件 public/main.html
<div id="app"></div>
(2) main.js
import { createApp } from 'vue';//导入App.vue
·import App from './App.vue';
console.log(App);
reateApp(App).mount("#app")//创建App并挂载
(3) App.vue

<template >
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >

以上就是今天的全部内容啦，如果对您有用，不要忘了一键三连哦！！！

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

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

相关文章

内网渗透(十二)之内网信息收集-内网端口扫描和发现

内网渗透(十二)之内网信息收集-内网端口扫描和发现

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…
阅读更多...
FOXCONN的第一天 记录 转型的前奏

FOXCONN的第一天 记录 转型的前奏

2023年春&#xff0c;我来到美丽富饶的威海小城&#xff0c;开始了我的foxconn之旅&#xff0c;刚毕业那阵来过之后&#xff0c;再一次参与这个价值10个亿的项目&#xff0c;首先要致敬郭老板&#xff0c;好久不见。然后致敬一下曾经的工友们&#xff0c;再次致敬一下逝去的SAP…
阅读更多...
2023年全国数据治理DAMA-CDGA/CDGP考试报名到弘博创新

2023年全国数据治理DAMA-CDGA/CDGP考试报名到弘博创新

弘博创新是DAMA中国授权的数据治理人才培养基地&#xff0c;贴合市场需求定制教学体系&#xff0c;采用行业资深名师授课&#xff0c;理论与实践案例相结合&#xff0c;快速全面提升个人/企业数据治理专业知识与实践经验&#xff0c;通过考试还能获得数据专业领域证书。 DAMA认…
阅读更多...
分布式高级篇4 —— 商城业务(2)

分布式高级篇4 —— 商城业务(2)

一、订单服务1、订单基本概念2、订单基本构成3、订单状态4、订单流程5、配置拦截器拦截订单请求6、订单确认页模型抽取7、订单确认页vo封装8、Feign 远程调用请求头丢失问题\*\*\*\*\* 惨痛教训9、Feign 异步调用请求头丢失问题10、查看库存状态11、模拟计算运费12、接口幂等性…
阅读更多...
智能优化算法——粒子群优化算法（PSO）（小白也能看懂）

智能优化算法——粒子群优化算法（PSO）（小白也能看懂）

前言&#xff1a; 暑假期间&#xff0c;因科研需要&#xff0c;经常在论文中看到各种优化算法&#xff0c;所以自己学习了一些智能优化的算法&#xff0c;做了一些相关的纸质性笔记&#xff0c;寒假一看感觉又有点遗忘了&#xff0c;并且笔记不方便随时查看&#xff0c;所以希…
阅读更多...
受ChatGPT影响，唐磊数字签名照经和合国际提升100倍

受ChatGPT影响，唐磊数字签名照经和合国际提升100倍

如果有人问二十年前什么最火&#xff0c;相信很多人会说唐磊的《丁香花》&#xff0c;如果有人问去年什么最火&#xff0c;很多人会把目光投向袁树雄的《早安隆回》。这也充分说明一个问题&#xff0c;世间的万事万物&#xff0c;都不会永远火爆下去&#xff0c;总有一天会被新…
阅读更多...
网络安全实验室4.注入关

网络安全实验室4.注入关

4.注入关 1.最简单的SQL注入 url:http://lab1.xseclab.com/sqli2_3265b4852c13383560327d1c31550b60/index.php 查看源代码&#xff0c;登录名为admin 最简单的SQL注入&#xff0c;登录名写入一个常规的注入语句&#xff1a; admin’ or ‘1’1 密码随便填&#xff0c;验证…
阅读更多...
社区人员管理系统项目测试

社区人员管理系统项目测试

项目测试: 目录 项目测试: 项目分析 项目介绍 1.对项目进行冒烟测试 2.测试 2.1注册功能测试 2.1.1需求分析&#xff1a; 2.1.2 编写测试用例 2.2登录功能测试 2.2.1需求分析&#xff1a; 2.2.2 编写测试用例 2.3针对用户管理功能进项测试&#xff1a; 2.3.1需求…
阅读更多...
如何预测机组设备健康状态？你可能需要这套解决方案

如何预测机组设备健康状态？你可能需要这套解决方案

1. 应用场景随机振动[注1]会发生在工业物联网的各个场景中&#xff0c;包括产线机组设备的运行、运输设备的移动、试验仪器的运行等等。通过分析采集到的振动信号可以预估设备的疲劳年限、及时知晓设备已发生的异常以及预测未来仪器可能发生的异常等等。本篇教程会提供给有该方…
阅读更多...
访问学者初到加拿大需要怎么做？

访问学者初到加拿大需要怎么做？

新报到的访问学者在刚刚到达加拿大的一段时间里由于环境陌生、语言障碍等会遇到一些问题。有的在解决住房问题上有不少困难&#xff0c;有的在与外国人打交道时有不少困惑。这些困难使有的学者在经济上和精神上吃了不少苦头。这也是最需要帮助的时候。我们希望这些信息能够帮助…
阅读更多...
RocketMQ5.0.0消息存储＜二＞_消息存储流程

RocketMQ5.0.0消息存储＜二＞_消息存储流程

目录 一、消息存储概览 二、Broker接收消息 三、消息存储流程 1. DefaultMessageStore类 2. 存储流程 1)&#xff1a;同步与异步存储 2)&#xff1a;CommitLog异步存储消息 3)&#xff1a;提交消息&#xff08;Commit&#xff09; 四、参考资料 一、消息存储概览 如下图所…
阅读更多...
【MySQL】MySQL 8.0 新特性之 - 公用表表达式（CTE）

【MySQL】MySQL 8.0 新特性之 - 公用表表达式（CTE）

MySQL 8.0 新特性之 - 公用表表达式&#xff08;CTE&#xff09;1. 公用表表达式&#xff08;CTE&#xff09; - WITH 介绍1.1 公用表表表达式1.1.1 什么是公用表表达式1.1.2 CTE 语法1.1.3 CTE示例1.3 递归 CTE1.3.1 递归 CTE 简介1.3.2 递归成员限制1.3.3 递归 CTE 示例1.3.4…
阅读更多...
VSCode编译及调试NRF52

VSCode编译及调试NRF52

VSCode下载 下载地址 下载arm-eabi-gcc10.3.1&#xff0c;mingw64-gcc12.2.0&#xff0c;nRF5x-Command-Line-Tools_9_6_0_Installer等安装文件 链接&#xff1a;https://pan.baidu.com/s/1iuVIkd3GAiUb3qGgF-ecPg 提取码&#xff1a;2d69 安装arm-eabi-gcc10.3.1设置环境变…
阅读更多...
接口自动化实战-postman

接口自动化实战-postman

1.测试模型 单元测试并非测试工程师的本职工作&#xff0c;它属于开发工程师的工作&#xff0c;开发进行单元测试的情况我们不知道&#xff0c;为了确保系统尽可能没有Bug&#xff0c;于是接口测试在测试工程师这里就变得由为重要了。实际工作中为菱形模型。 接口测试能更早的…
阅读更多...
CentOS8基础篇1：VMware 安装CentOS8 教程

CentOS8基础篇1：VMware 安装CentOS8 教程

一、准备工作 1.准备一台服务器 1&#xff09;下载VMware https://jssoft.bangtengxinxi.com/vmware/index360.html?source360a&unitid1643144282&unitvmware&e_creative8925351127&qhclickid06762bb36ff752c6 2.准备CentOS8 系统盘 1&#xff09;CentOS8官…
阅读更多...
身份证号码正则表达式详解

身份证号码正则表达式详解

1、结构&#xff1a; 公民身份号码是特征组合码&#xff0c;由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为&#xff1a;六位数字地址码&#xff0c;八位数字出生日期码&#xff0c;三位数字顺序码和一位数字校验码。 地址码&#xff1a;&#xff08;身份证号码…
阅读更多...
基于图的下一代入侵检测系统

基于图的下一代入侵检测系统

青藤云安全是一家主机安全独角兽公司&#xff0c;看名字就知道当前很大一块方向专注云原生应用安全&#xff0c;目前主营的是主机万相/容器蜂巢产品&#xff0c;行业领先&#xff0c;累计支持 800万 Agent。当前公司基于 NebulaGraph 结合图技术开发的下一代实时入侵检测系统已…
阅读更多...
[数据库]初识数据库

[数据库]初识数据库

●&#x1f9d1;个人主页:你帅你先说. ●&#x1f4c3;欢迎点赞&#x1f44d;关注&#x1f4a1;收藏&#x1f496; ●&#x1f4d6;既选择了远方&#xff0c;便只顾风雨兼程。 ●&#x1f91f;欢迎大家有问题随时私信我&#xff01; ●&#x1f9d0;版权&#xff1a;本文由[你帅…
阅读更多...
[C语言]offseto宏的认识与模拟实现

[C语言]offseto宏的认识与模拟实现

目录 1.offseto的认识 2.offseto的模拟实现 1.offseto的认识 在结构体中&#xff0c;因为内存对齐的存在我们需要进行计算才能知道结构体成员的地址对于结构体首地址的偏移量为多少&#xff0c;今天认识的offseto就是将结构体中成员地址对于结构体首地址的偏移量的大小所计算…
阅读更多...
静态代理，JDK动态代理，Cglib动态代理的写法

静态代理，JDK动态代理，Cglib动态代理的写法

目录静态代理JDK动态代理Cglib动态代理小结使用代理模式可以在不改变被代理类的情况下&#xff0c;实现对被代理类的进行增强。 例如&#xff1a;在被代理类中有一个div()方法&#xff0c;方法中只是计算除法&#xff0c;然而想要对其进行增强&#xff0c;如添加异常捕获等。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023