当前位置: 首页 > news >正文

前端工程化之:webpack1-2(安装与使用)

一、webpack简介

  webpack中文网

 webpack 是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。

webpack的特点:

  • 为前端工程化而生: webpack 致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给 webpack 来处理。
  • 简单易用:支持零配置,可以不用写任何一行额外的代码就使用 webpack
  • 强大的生态: webpack 是非常灵活、可以扩展的, webpack 本身的功能并不多,但它提供了一些可以扩展其功能的机制,使得一些第三方库可以融于到 webpack 中。
  • 基于 nodejs 由于 webpack 在构建的过程中需要读取文件,因此它是运行在 node 环境中的。
  • 基于模块化: webpack 在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析的,它支持各种模块化标准,包括但不限于 CommonJS 、 ES6 Module 

二、webpack的安装和使用

安装:

 webpack 通过 npm 安装,它提供了两个包:

  • webpack:核心包,包含了 webpack 构建过程中要用到的所有 api
  • webpack-cli:提供一个简单的 cli 命令,它调用了 webpack 核心包的 api ,来完成构建过程。

安装方式: 

  • 全局安装: 可以全局使用 webpack 命令,但是无法为不同项目对应不同的 webpack 版本;
  • 本地安装:推荐,每个项目都使用自己的 webpack 版本进行构建 

本地安装步骤: 

1.新建一个文件夹,在该文件夹目录下使用 cmd 命令进入窗口;

2.在打开的窗口中输入 npm init 进行项目初始化;

npm init // 初始化

3.安装 webpack 依赖

npm i -D webpack webpack-cli // 安装依赖

使用: 

webpack // npx webpack

默认情况下, webpack 会以 ./src/index.js 作为入口文件分析依赖关系,打包到 ./dist/main.js 文件中。
通过 --mode 选项可以控制 webpack 的打包结果的运行环境。默认是生产环境。

npx webpack --mode=development // 开发环境打包
npx webpack --mode=production// 生产环境打包

 一般在 package.json 文件中进行脚本配置。

"scripts": {"dev":"webpack --mode=development","build":"webpack --mode=production"},

配置后可以用 npm 命令进行开发环境和生产环境打包。 

npm run dev // 开发环境打包
npm run build // 生产环境打包

相关文章:

前端工程化之:webpack1-2(安装与使用)

一、webpack简介 webpack中文网 webpack 是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。 webpack的特点&a…...

MySQL索引类型及数据结构【笔记】

1 索引类型 返回面试宝典 主键索引(PRIMARY):数据列不允许重复,不允许为NULL,一个表只能有一个主键。 唯一索引(UNIQUE):数据列不允许重复,允许为NULL,一个表允许多个列创建唯一索引…...

成熟的内外网数据交换方案,如何实现跨网传输?

网络迅速发展,我们可以从网络上查找到各式各样的信息,但是同时网络安全问题也随之严重。近几年,各种有关网络安全的新闻不断被报道,数据泄露给很多企业带来了严重打击,不仅是经济损失,严重者还会对企业的声…...

python11-Python的字符串之repr

有时候,我们需要将字符串与数值进行拼接,而 Python 不允许直接拼接数值和字符串,程序必须先将数值转换成字符串。 为了将数值转换成字符串,可以使用str0或repr()函数,例如如下代码。 # !/usr/bin/env python# -*- co…...

python小项目:口令保管箱

代码&#xff1a; #! python3 # python 编程-----口令保管箱passwords{emails: F7minlBDDuvMJuxESSKHFhTxFtjVB6,blog:VmALvQyKAxiVH5G8v01if1MLZF3sdt,luggage:12345,} import sys,pyperclip if len(sys.argv)<2:print(usage:python python3文件[accout]-copy accout pass…...

微认证 openEuler社区开源贡献实践

文章目录 1. 开源与开源社区2. openEuler 社区概述3.参与openEuler社区贡献4.openEuler软件包开发Linux软件管理——源码编译 1. 开源与开源社区 Richard Matthew Stallman&#xff0c;1983年9月推出GNU项目&#xff0c;并发起自由软件运动(free software movement或free/open…...

紫光展锐M6780丨超分辨率技术——画质重构还原经典

上一期&#xff0c;我们揭秘了让画质更加炫彩的AI-PQ技术。面对分辨率较低的老电影&#xff0c;光有高饱和度的色彩是不够的&#xff0c;如何能够提高视频影像的分辨率&#xff0c;使画质更加清晰&#xff0c;实现老片新看&#xff1f; 本期带大家揭晓紫光展锐首颗AI8K超高清智…...

《Python 简易速速上手小册》第6章:Python 文件和数据持久化(基于最新版 Python3.12 编写)

注意&#xff1a;本《Python 简易速速上手小册》 核心目的在于让零基础新手「快速构建 Python 知识体系」 文章目录 <mark >注意&#xff1a;本《Python 简易速速上手小册》<mark >核心目的在于让零基础新手「快速构建 Python 知识体系」 6.1 文件读写操作6.1.1 打…...

华为机考入门python3--(4)牛客4-字符串分隔

分类&#xff1a;字符串 知识点&#xff1a; 复制符号* 复制3个0 0*3 000 字符串截取 截取第i位到j-1位 str[i:j] 题目来自【牛客】 input_str input().strip()# 先补齐 if len(input_str) % 8 ! 0: input_str 0 * (8 - len(input_str) % 8) # 每8个分 out…...

Unity MonoBehaviour 生成dll

dllllllllllllll&#x1f953; &#x1f959;vs创建类库项目&#x1f9c0;添加UnityEngine、UnityEditor引用&#x1f355;添加MonoBehaviour类&#x1f9aa;设置dll生成路径&#x1f37f;生成dll&#x1f354;使用dll中的Mono类 &#x1f959;vs创建类库项目 &#x1f9c0;添加…...

基于Python flask MySQL 猫眼电影可视化系统设计与实现

1 绪论 1.1 设计背景及目的 猫眼电影作为国内知名的电影信息网站&#xff0c;拥有海量的电影信息、票房数据和用户评价数据。这些数据对于电影市场的研究和分析具有重要意义。然而&#xff0c;由于数据的复杂性和数据来源的多样性&#xff0c;如何有效地采集、存储和展示这些数…...

【新课上架】安装部署系列Ⅲ—Oracle 19c Data Guard部署之两节点RAC部署实战

01 课程介绍 Oracle Real Application Clusters (RAC) 是一种跨多个节点分布数据库的企业级解决方案。它使组织能够通过实现容错和负载平衡来提高可用性和可扩展性&#xff0c;同时提高性能。本课程基于当前主流版本Oracle 19cOEL7.9解析如何搭建2节点RAC对1节点单机的DATA GU…...

gdb调试std::list和std::vector等容器的方法

GDB中print方法并不能直接打印STL容器中保存的变量&#xff0c;其实只要http://www.yolinux.com/TUTORIALS/src/dbinit_stl_views-1.03.txt这个文件保存为~/.gdbinit 就可以使用它提供的方法方便调试容器 指定启动文件&#xff1a;~/.gdbinit&#xff0c;下面的方法任选其一。…...

python stomp 转发activemq topic消息

import pysimplestomp 连接到ActiveMQ的Topic&#xff1a; # 连接ActiveMQ服务器 server "tcp://localhost:61613" topic "/topic/your_topic"# 连接到ActiveMQ的Topic destination f"destination://{topic}" connection pysimplestomp.con…...

Spring Boot使用AOP

一、为什么需要面向切面编程&#xff1f; 面向对象编程&#xff08;OOP&#xff09;的好处是显而易见的&#xff0c;缺点也同样明显。当需要为多个不具有继承关系的对象添加一个公共的方法的时候&#xff0c;例如日志记录、性能监控等&#xff0c;如果采用面向对象编程的方法&…...

C语言通过IXMLHttpRequest以get或post方式发送http请求获取服务器文本或xml数据

做过网页设计的人应该都知道ajax。 Ajax即Asynchronous Javascript And XML&#xff08;异步的JavaScript和XML&#xff09;。使用Ajax的最大优点&#xff0c;就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作&#xff0c;并避免了在网络上发…...

QtRVSim(二)一个 RISC-V 程序的解码流程

继上一篇文章简单代码分析后&#xff0c;本文主要调研如何实现对指令的解析运行。 调试配置 使用 gdb 工具跟踪调试运行。 c_cpp_properties.json 项目配置&#xff1a; {"name": "QtRvSim","includePath": ["${workspaceFolder}/**&quo…...

x-cmd pkg | httpx - 为 Python 设计的下一代 HTTP 客户端库

目录 简介首次用户功能特点进一步探索 简介 HTTPX 是一个为 Python 设计的下一代 HTTP 客户端库&#xff0c;由 Tom Christie 创建。它提供了同步和异步的 API&#xff0c;并支持 HTTP/1.1 和 HTTP/2 协议。与 Requests 库类似&#xff0c;但增加了对异步请求的支持和 HTTP/2 …...

代码随想录算法训练营第四十二天(动态规划篇)|62. 不同路径

62. 不同路径 题目链接&#xff1a;62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 思路 dp[i][j]: 从0到位置[i, j]共有dp[i][j]条路径。 dp[i][j] dp[i-1][j] dp[i][j-1] 到位置[i,j]&#xff0c;可以从它的上面或者左边来&#xff0c;所以路径和为这两个方向的路…...

YOLO 全面回顾:从最初的YOLOv1到最新的YOLOv8、YOLO-NAS,以及整合了 Transformers 的 YOLO

YOLO 全面回顾 综述评估指标YOLO v1YOLO v2YOLO v3YOLO v4YOLOv5 与 Scaled-YOLOv4 YOLORYOLOXYOLOv6YOLOv7DAMO-YOLOYOLOv8PP-YOLO, PP-YOLOv2, and PP-YOLOEYOLO-NASYOLO with Transformers 综述 论文&#xff1a;https://arxiv.org/pdf/2304.00501.pdf 代码&#xff1a;gi…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...