webpack 静态模块打包工具

webpack

为什么?

把静态模块内容,压缩,整合,转译等(前端工程化)

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

vite

为什么不直接学习vite 而学习webpack

因为很多项目还是基于webpack来进行构建的,所以还要掌握webpack

案例:封装utils包,校验用户名和密码长度 ,在index.js种使用,使用webpack打包

步骤:

1.新建项目文件夹,初始化包环境

2.新建src源代码文件夹(书写代码)

3.下载webpack webpack-cli 到项目(版本独立)

4.项目种允许工具命令,采用自定义命令的方式(局部命令)

5.自动产生dist分支文件夹(压缩和优化后,用于最终运行的代码)

总结:

在package.json中自定义命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack"},

如何运行package.json 里的自定义命令

npm run 自定义命令

修改webpack打包入口和出口

步骤:

1.项目根目录,新建webpack.config.js配置文件

2.导出配置对象,配置入口,出口文件路径

//webpack.config.js
const path = require('path')module.exports={// 入口entry:path.resolve(__dirname,'src/main.js'),// 出口  path 路径  filename 文件名output:{path:path.resolve(__dirname,'dist'),filename:'my-first-webpack.bundle.js'}
}

自动生成html文件

HtmlWebpackPlugin 简化了 HTML 文件的创建

步骤:

1.下载本地软件包

2.配置webpack.config.js让webpack拥有插件的功能

3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源

 plugins:[new HtmlWebpackPlugin({// 以指定的html文件为生成模板template:path.resolve(__dirname,'public/index.html')})]

打包css模块

注意:webpack默认只识别js和json文件内容

加载器 css-loader 解析css代码

加载器style-loader 把解析后的css代码插入到DOM

步骤:

1.准备css文件导入到src/main.js中 (压缩转移处理)

2.下载css-loader 和style-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包less模块

加载器 less-loader 把less代码编译为css代码,还需要依赖less软件包

步骤:

1.准备less样式导入到src/main.js中 (压缩转移处理)

2.下载less 和less-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包图片

webpack5 内置了资源模块的打包,无需下载额外的loader

步骤:

1.准备图片素材到src/assets中

2.在index.less中给body添加背景图

3.在main.js中给img标签添加logo图片

4.配置webpack.config.js 让webpack拥有该加载器功能

5.打包后运行dist/index.html

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

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

相关文章

js 判断对象为数组.html

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8" /> <title>数组判断</title> </head> <body> <script> function isArray(obj) { /* 判断对象 obj 是否是数组。*/ return typeof o…

vue加载大量数据优化

在Vue中加载大量数据并形成列表时&#xff0c;可以通过以下方法来优化性能&#xff1a; 分页加载&#xff1a;不要一次性加载所有的数据&#xff0c;而是分批加载数据&#xff0c;每次只加载当前页需要显示的数据量。可以使用第三方库如vue-infinite-loading来实现无限滚动加载…

找免费商用的图片素材就上这6个网站。

分享6个免费商用的高清图片素材库&#xff0c;你想要找到这里都能找到&#xff0c;赶紧收藏起来吧~ 菜鸟图库 https://www.sucai999.com/pic.html?vNTYwNDUx 网站主要是为新手设计师提供免费素材的&#xff0c;素材的质量都很高&#xff0c;类别也很多&#xff0c;像平面、UI…

Git Submodule 更新子库失败 fatal: Unable to fetch in submodule path

编辑本地目录 .git/config 文件 在 [submodule “Assets/CommonModule”] 项下 加入 fetch refs/heads/:refs/remotes/origin/

常规VUE项目优化实践,跟着做就对了!

总结&#xff1a; 主要优化方式&#xff1a; imagemin优化打包大小&#xff08;96M->50M&#xff09;&#xff0c;但是以打包速度为代价&#xff0c;通过在构建过程中压缩图片来实现&#xff0c;可根据需求开启。字体压缩&#xff1a;目前项目内引用为思源字体&#xff0c…

认识所有权

专栏简介&#xff1a;本专栏作为Rust语言的入门级的文章&#xff0c;目的是为了分享关于Rust语言的编程技巧和知识。对于Rust语言&#xff0c;虽然历史没有C、和python历史悠远&#xff0c;但是它的优点可以说是非常的多&#xff0c;既继承了C运行速度&#xff0c;还拥有了Java…

C++——文件操作

一、文本文件 C中输入输出是通过流对象进行操作&#xff0c;对于文件来说写文件就是将内容从程序输出到文件&#xff0c;需要用到写文件流ofstream&#xff1b;而读文件就是将内容从文件输入到程序&#xff0c;需要用到读文件流ifstream&#xff1b;这两个文件流类都包含在头文…

f1tenth的多点导航+路径规划+pursuit追踪

文章目录 一、发布起点,终点二、 记录规划轨迹点三、pursuit追踪一、发布起点,终点 pub_amcl: #!/usr/bin/env python3import rospy from geometry_msgs.msg import PoseWithCovarianceStampeddef publish_amcl_pose():# 初始化节点rospy.init_node(amcl_pose_publisher)# …

oracle的管道函数

Oracle管道函数(Pipelined Table Function)oracle管道函数 1、管道函数即是可以返回行集合&#xff08;可以使嵌套表nested table 或数组 varray&#xff09;的函数&#xff0c;我们可以像查询物理表一样查询它或者将其赋值给集合变量。 2、管道函数为并行执行&#xff0c;在…

P1257 平面上的最接近点对

题目 思路 详见加强加强版 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]; int n; double d1e16; pair<int,int> vl[maxn],vr[maxn]; void read() { cin>>n;for(int i1;i<…

Android性能优化—数据结构优化

优化数据结构是提高Android应用性能的重要一环。在Android开发中&#xff0c;ArrayList、LinkedList和HashMap等常用的数据结构的正确使用对APP性能的提升有着重大的影响。 一、ArrayList ArrayList内部使用的是数组&#xff0c;默认大小10&#xff0c;当数组长度不足时&…

二叉排序树(二叉查找树)

二叉排序树&#xff08;二叉查找树&#xff09;的性质&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有结点的值均小于它的根结点的值。若它的右子树不为空&#xff0c;则右子树上所有结点的值均大于它的根将诶点的值。它的左、右子树也分别为二叉排序树。 对二叉…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

目录 10、自由风格的CI操作&#xff08;中间架构&#xff09;中间架构图创建web项目Idea提交项目到远程仓库提交代码到本地库提交代码到远程库从jenkins拉取代码新建任务jenkins集成gitlab立即构建 将项目打为jar包Jenkins 配置 mvn 命令重新构建 代码质量检测jenkins将代码推送…

Java on Azure Tooling 6月更新|标准消费和专用计划及本地存储账户(Azurite)支持

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Java on Azure 工具的六月更新。在本次更新中&#xff0c;我们将介绍 Azure Spring Apps 标准消费和专用计划支持以及本地存储账户&…

对作用域、作用域链的理解

全局作用域和函数作用域 全局作用域 最外层函数和最外层函数外面定义的变量拥有全局作用域 所有未定义直接赋值的变量自动声明为全局作用域 所有 window 对象的属性拥有全局作用域 全局作用域有很大的弊端&#xff0c;过多的全局作用域变量会污染全局命名空 间&#xff0c;容…

黑马大数据学习笔记5-案例

目录 需求分析背景介绍目标需求数据内容DBeaver连接到Hive建库建表加载数据 ETL数据清洗数据问题需求实现查看结果扩展 指标计算需求需求指标统计 可视化展示BIFineBI的介绍及安装FineBI配置数据源及数据准备 可视化展示 P73~77 https://www.bilibili.com/video/BV1WY4y197g7?…

如何使用自己域名进行远程访问内网群晖NAS 6.X

使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 文章目录 使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 在之前的文章中&#xff0c;我们向大家演示了如何使用cpolar&#xff0c;创建一条固定的、能够在公共互联网登录内网群晖NAS的数据隧道。这条隧道已经能够应对…

深度分析卡尔曼滤波算法原理

一、什么是卡尔曼滤波? 你可以在任何含有不确定信息的动态系统中使用卡尔曼滤波&#xff0c;对系统下一步的走向做出有根据的预测&#xff0c;即使伴随着各种干扰&#xff0c;卡尔曼滤波总是能指出真实发生的情况。 在连续变化的系统中使用卡尔曼滤波是非常理想的&#xff0c…

java+springboot摄影作品竞赛报名系统 微信小程序--论文

随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff0c;网络化和电子化。网上管理&#xff0c;它将是直接管理摄影竞赛小程序的最新形式。本小程序是以构建摄影竞赛为目标&#xff0c;使用java技术制作&#xff0c;…