Webpack5入门到原理2:基本使用

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件,就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

开发模式:仅能编译 JS 中的 ES Module 语法

生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码

开始使用

1. 资源目录

webpack_code # 项目根目录(所有指令必须在这个目录运行)
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

  • count.js
export default function count(x, y) {return x - y;
}
  • sum.js
export default function sum(...args) {return args.reduce((p, c) => p + c, 0);
}
  • main.js
import count from "./js/count";
import sum from "./js/sum";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

3. 下载依赖

打开终端,来到项目根目录。运行以下指令:

  • 初始化package.json
npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

  • 下载依赖
npm i webpack webpack-cli -D

4. 启用 Webpack

  • 开发模式
npx webpack ./src/main.js --mode=development
  • 生产模式
npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包,不但会打包 main.js,还会将其依赖也一起打包进来。

--mode=xxx:指定模式(环境)。

5. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下,我们查看 dist 目录下文件情况就好了

小结

Webpack 本身功能比较少,只能处理 js 资源,一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack,就是主要学习如何处理其他资源。

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

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

相关文章

Unity vs Godot :哪个游戏引擎更适合你?

Unity vs Godot :哪个游戏引擎更适合你? 游戏引擎的选择对开发过程和最终产品质量有着重大影响。近年来,Godot和Unity这两款引擎受到广泛关注。本文将从多个维度对两者进行比较,以期为开发者提供正确的选择建议。 Godot和Unity都有…

Backtrader 文档学习-Indicators混合时间框架

Backtrader 文档学习-Indicators混合时间周期 1.不同时间周期 如果数据源在Cerebro引擎中具有不同的时间范围和不同的长度,指示器将会终止。 比如:data0是日线,data1是月线 。 pivotpoint btind.PivotPoint(self.data1) sellsignal self…

IMDB电影评论的情感分析——paddle

项目地址:IMDB电影评论的情感分析 - 飞桨AI Studio星河社区 (baidu.com) 1. 实验介绍 1.1 实验目的 理解并掌握循环神经网络的基础知识点,包括模型的时序结构、模型的前向传播、反向传播等掌握长短时记忆网络LSTM和门控循环单元网络GRU的设计原理熟悉如…

Halcon基于形变的模板匹配

Halcon基于形变的模板匹配 形变分为两种,一种是基于目标局部的形变,另一种是由于透视关系而产生的形变。基于形变的模板匹配也是一种基于形状的匹配方法,但不同的是,其返回结果中不仅包括轻微形变的形状.形变的位置和参数&#x…

Node.js基础知识点(五)- http

一.request 请求事件处理函数 var http require(http)var server http.createServer() request 请求事件处理函数,需要接收两个参数: Request 请求对象 请求对象可以用来获取客户端的一些请求信息,例如请求路径 Response 响应对象 响应对…

神器yakit之web fuzzer功能

前言 yakit并不像burp一样单独设置爆破模块,但是yakit也是可以爆破的,并且更好用(个人感觉)。 手工测试场景中需要渗透人员对报文进行反复的发送畸形或者特定的payload进行查看服务器的反馈并以此来进行下一步的判断。 Fuzz标签便…

Verilog基础:强度建模(二)

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 三、拥有单个强度和确定值的net型信号的线与组合(线网多驱动) 首先来说明一下什么叫信号拥有单个强度和确定值,其实如果一个ne…

开箱即用之MyBatisPlus XML 自定义分页

调用方法 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;public Page<User> queryListByPage(User user) { Page<User> page new Page<>(1, 12); return userMapper.queryListByPage(page, user); } mapper接口 import co…

Vue中的日历组件 Calendar 实现 考勤打卡记录

日历组件 Calendar 可以自定义在页面添加内容。 实现效果图 1.由于Calendar没有右上角月份切换的API事件&#xff0c;可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释&#xff1a;this.$m(this.beginTime).format(…

手撕java必备

刚需import import java.util.Scanner; import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.ArrayList; import java.util.List; import java.lang.System; import java.io.*; import java.util.*; input场景 场景一&#…

Halcon 一维测量

文章目录 算子矩形算子弧形算子移动到新的参考点 Halcon 案例测量保险丝的宽度&#xff08;边缘对测量&#xff09;使用助手进行测量 halcon 案例获取芯片引脚的个数平均宽度距离&#xff0c;连续两个边缘的距离&#xff08;measure_pos &#xff09;halcon 定位测量Halcon 测量…

科普:大语言模型中的量化是什么意思?

大语言模型是指能够处理大规模文本数据的深度学习模型&#xff0c;例如GPT-3、BERT等。这些模型通常有数十亿甚至数百亿个参数&#xff0c;占用大量的存储空间和计算资源。为了提高这些模型的效率和可移植性&#xff0c;一种常用的方法是模型量化。 1&#xff1a;什么是模型量化…

代码随想录算法训练营第三十七天|738.单调递增的数字、968.监控二叉树、总结

题目&#xff1a;738.单调递增的数字 文章链接&#xff1a;代码随想录 视频链接&#xff1a;LeetCode:738.单调递增的数字 题目链接&#xff1a;力扣题目链接 图释&#xff1a; 从后向前遍历&#xff0c;当后一位数大于前一位位数时&#xff0c;前一位数减减&#xff0c;后…

Java基础面试题-2day

面向对象 创建一个对象用什么运算符&#xff0c;对象实体和对象引用有什么不同&#xff1f; 创建对象使用new String A new String(); A即为对象引用&#xff0c;通过new运算符&#xff0c;创建String()类型的对象实体。 对象引用的存储位置在栈内存 对象实体的存储位置在堆…

【算法】使用优先级队列(堆)解决算法题(TopK等)(C++)

文章目录 1. 前言2. 算法题1046.最后一块石头的重量703.数据流中的第K大元素 2.5 如何选择大根堆 与 小根堆&#xff1f; 为什么选择大根堆&#xff08;小根堆&#xff09;&#xff1f;692.前K个高频单词295.数据流的中位数 1. 前言 我们知道&#xff1a;优先级队列是一种常用…

Maven 基础安装配置及使用

大家好我是苏麟 , 今天聊聊Maven . Maven Maven , 是Apache公司下基于Java开发的开源项目 . 我们构建一个项目需要用到很多第三方的类库&#xff0c;需要引入大量的jar包。一个项目Jar包的数量之多往往让我们瞠目结舌&#xff0c;并且Jar包之间的关系错综复杂&#xff0c;一…

高并发缓存问题分析以及分布式锁的实现

一,场景概述: 在高并发的环境下,比如淘宝,京东不定时的促销活动,大量的用户访问会导致数据库的性能下降,进而有可能数据库宕机从而不能产生正常的服务,一般一个系统最大的性能瓶颈&#xff0c;就是数据库的io操作,如果发生大量的io那么他的问题也会随之而来。从数据库入手也是…

Python | 六、哈希表 Hash Table(列表、集合、映射)

哈希表基础 哈希表是一类数据结构&#xff08;哈希表包含数组、集合和映射&#xff0c;和前两篇文章叙述的字符串、链表平级&#xff09;哈希表概念&#xff1a;类似于Python里的字典类型&#xff0c;哈希表把关键码key值通过哈希函数来和哈希表上的索引对应起来&#xff0c;之…

Vue2:解绑自定义事件

一、场景描述 上一节&#xff0c;我们学习了&#xff0c;自定义事件绑定到组件上。 现在&#xff0c;我们学习下&#xff0c;给组件解绑自定义事件的几种方法。 首先&#xff0c;我们试想一下&#xff0c;这个功能的适用场景&#xff1f; 一般同学都会想&#xff0c;解绑&…

力扣第236题——二叉树的最近公共祖先 (C语言题解)

题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以…