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

webpack(二)webpack介绍与基础配置

什么是webpack

webpack最初的目标是实现前端项目模块化,旨在更高效的管理和维护项目中的每一个资源。
可以看做是模块打包机,分析你的项目结构,找到javascript模块以及其它一些浏览器不能直接运行的拓展语言(Scss、TypeScript等),并将其打包为合适的格式以供浏览器使用。

可以做什么

  • 代码转化:es6转为es5,scss、less转为css
  • 文件优化:压缩代码体积
  • 代码分割:路由懒加载
  • 模块合并
  • 自动刷新:热更新
  • 代码校验
  • 自动发布

2.基础配置文件

  • 入口文件
    默认是src/index.js,如果我们想要修改入口文件,可以在打包时使用命名npx webpack --entry ./src/main.js来进行打包
  • 出口文件
    默认是项目下的dist目录,如果想要修改npx webpack --output-path ./build

可以使用webpack配置文件进行配置(入口文件可以采用相对路径,出口文件只能采用绝对路径

// webpack.config.js 
const path = require('path')module.exports = {entry: './src/index.js',output: {filename: "build.js",// path: './dist'  //The provided value "./dist" is not an absolute path! 必须是绝对路径path: path.resolve(__dirname, 'dist') //path.resolve(__dirname)__dirname, 在所有情况下,该变量都表示当前运行的js文件所在的目录,它是一个绝对路径,在此路径下新建一个dist目录,存放打包文件}
}
  • 指定webpack配置文件
// package.json
"build":"webpack --config test.webpack.json"

相关文章:

webpack(二)webpack介绍与基础配置

什么是webpack webpack最初的目标是实现前端项目模块化,旨在更高效的管理和维护项目中的每一个资源。 可以看做是模块打包机,分析你的项目结构,找到javascript模块以及其它一些浏览器不能直接运行的拓展语言(Scss、TypeScript等&…...

RabbitMQ | 在ubuntu中使用apt-get安装高版本RabbitMQ

目录 一、官方脚本 二、彻底卸载 三、重新安装 1.安装高版本Erlang 2.安装RabbitMQ 一、官方脚本 直接使用apt安装的rabbitmq版本较低,甚至可能无法使用死信队列等插件。首先提供一个 官方 的安装脚本: #!/usr/bin/sh sudo apt-get install curl …...

springboot集成es 插入和查询的简单使用

第一步&#xff1a;引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId><version>2.2.5.RELEASE</version></dependency>第二步&#xff1a;…...

liunx下ubuntu基础知识学习记录

使用乌班图 命令安装使用安装网络相关工具安装dstat抓包工具需要在Ubuntu内安装openssh-server gcc安装vim安装hello word输出1. 首先安装gcc 安装这个就可以把gcc g一起安装2. 安装VIM3.编译运行代码 解决ubuntu与主机不能粘贴复制 命令安装使用 安装网络相关工具 使用ifconf…...

基于Googlenet深度学习网络的螺丝瑕疵检测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ....................................................................................% 获…...

keepalived + lvs (DR)

目录 一、概念 二、实验流程命令 三、实验的目的 四、实验步骤 一、概念 Keepalived和LVS&#xff08;Linux Virtual Server&#xff09;可以结合使用来实现双机热备和负载均衡。 Keepalived负责监控主备服务器的可用性&#xff0c;并在主服务器发生故障时&#xff0c;将…...

微服务框架 go-zero 快速实战

对于咱们快速了解和将 go-zero 使用起来&#xff0c;我们需要具备如下能力&#xff1a; 基本的环境安装和看文档的能力 Golang 的基本知识 Protobuf 的基本知识 web&#xff0c;rpc 的基本知识 基本的 mysql 知识 其实这些能力&#xff0c;很基础&#xff0c;不需要多么深入&a…...

mysql基础面经之三:事务

6 事务 6.1 说一下事务的ACID和隔离级别 1 讲解了AID三个特性都是为了C&#xff08;一致性&#xff09;服务的。一般数据库需要使用事务保证数据库的一致性。 正确情况下最好详细讲讲&#xff1a; ACID是用来描述数据库事务的四个关键特性的首字母缩写&#xff0c;具体包括&a…...

JavaScript基本数组操作

在JavaScript中&#xff0c;内置了很多函数让我们可以去对数组进行操作&#xff0c;本文我们就来学习这些函数吧 添加元素 push ● push可以让我们在数组后面再添加一个数据&#xff0c;例如 const friends ["张三", "李四", "王五"]; frie…...

C#---第21: partial修饰类的特性及应用

0.知识背景 局部类型适用于以下情况&#xff1a; 类型特别大&#xff0c;不宜放在一个文件中实现。一个类型中的一部分代码为自动化工具生成的代码&#xff0c;不宜与我们自己编写的代码混合在一起。需要多人合作编写一个类 局部类型的限制: 局部类型只适用于类、接口、结构&am…...

SQL 语句继续学习之记录三

一&#xff0c;数据的插入&#xff08;insert 语句的使用方法&#xff09; 使用insert语句可以向表中插入数据(行)。原则上&#xff0c;insert语句每次执行一行数据的插入。 列名和值用逗号隔开&#xff0c;分别扩在&#xff08;&#xff09;内&#xff0c;这种形式称为清单。…...

Nexus仓库介绍以及maven deploy配置

一 、Nexus仓库介绍 首先介绍一下Nexus的四个仓库的结构&#xff1a; maven-central 代理仓库&#xff0c;代理了maven的中央仓库&#xff1a;https://repo1.maven.org/maven2/&#xff1b; maven-public 仓库组&#xff0c;另外三个仓库都归属于这个组&#xff0c;所以我们的…...

A Survey on Knowledge-Enhanced Pre-trained Language Models

摘要 自然语言处理(NLP)已经通过使用BERT等预训练语言模型(plm)发生了革命性的变化。尽管几乎在每个NLP任务中都创造了新的记录,但plm仍然面临许多挑战,包括可解释性差,推理能力弱,以及在应用于下游任务时需要大量昂贵的注释数据。通过将外部知识集成到plm中,知识增强预训…...

SQL求解用户连续登录天数

数据分析面试过程中&#xff0c;一般都逃不掉对SQL的考察&#xff0c;可能是笔试的形式&#xff0c;也可能是面试过程中面试官当场提问&#xff0c;当场在纸上写出&#xff0c;或者简单说一下逻辑。 今天&#xff0c;就来分享一道面试中常常被问到的一类SQL问题&#xff1a;连…...

掌握逻辑漏洞复现技术,保护您的数字环境

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 1、支付逻辑漏洞 攻击相关介绍 介绍&#xff1a; 支付逻辑漏洞是指攻击者利用支付系统的漏洞&#xff0c;突破系统的限制&#xff0c;完成非法的支付操作。攻击者可以采…...

windows系统服务器在不解锁屏幕不输入密码的前提下,电脑通电开机启动程序。

在控制面板中找到“管理工具”中的 “任务计划程序”&#xff0c;打开“任务计划程序”窗口。如图&#xff1a; 双击打开任务计划程序&#xff0c;空白出右键创建基本任务&#xff0c;或者点击最右侧的创建基本任务。 输入名称&#xff0c;点击下一步。 先选择计算机启动时&a…...

spring cloud seata集成

目录 一、seata使用场景 二、seata组成 三、seata服务端搭建 四、客户端使用seata 4.1 客户端增加undo_log表 4.2 客户端增加seata相关配置 4.3 客户端使用注解 五、测试 一、seata使用场景 微服务中&#xff0c;一个业务涉及到多个微服务系统&#xff0c;每个微服务…...

HTTP 常⻅的状态码有哪些,以及适⽤场景

⼀、HTTP状态码 HT T P 状态码&#xff08; HT T P S t a t u s Co d e &#xff09;是⽤来表示⽹⻚服务器超⽂本传输协议响应状态的 3 位数字代 码。它由 RFC 2 6 1 6 规范定义&#xff0c;并得到 RFC 2 5 1 8 、 RFC 2 8 1 7 、 RFC 2 2 9 5 、 RFC 2 7 7 4 与 RFC 4 9 1 8…...

后端给前端传参数忽略空属性

JsonInclude JsonInclude注解用于指定在对象序列化为JSON字符串时&#xff0c;哪些属性应该被包含进去&#xff0c;哪些属性应该被忽略掉。 JsonInclude注解有以下几个常用选项&#xff1a; JsonInclude(JsonInclude.Include.NON_NULL)&#xff1a;表示只有属性值不为null的属…...

SPSS教程:如何绘制带误差的折线图

SPSS教程&#xff1a;如何绘制带误差的折线图 1、问题与数据 研究者想研究45-65岁健康男性中&#xff0c;静坐时长和血胆固醇水平的关系&#xff0c;故招募100名研究对象询问其每天静坐时长&#xff08;time&#xff09;&#xff0c;并检测其血液中胆固醇水平&#xff08;cho…...

千问3.5-2B网页版深度解析:前端上传逻辑、后端推理链路、JSON返回结构

千问3.5-2B网页版深度解析&#xff1a;前端上传逻辑、后端推理链路、JSON返回结构 1. 平台概述 千问3.5-2B是Qwen系列中的轻量级视觉语言模型&#xff0c;专为图片理解与文本生成任务优化设计。这个开箱即用的解决方案将复杂的AI能力封装成简单的网页交互&#xff0c;用户无需…...

春节前必看:春联生成模型-中文-base部署教程,轻松制作专属对联

春节前必看&#xff1a;春联生成模型-中文-base部署教程&#xff0c;轻松制作专属对联 春节将至&#xff0c;家家户户都开始准备贴春联。但每年想一副既传统又有新意的对联可不容易&#xff0c;要么是市场上买的千篇一律&#xff0c;要么自己创作又缺乏灵感。今天&#xff0c;…...

小红书数据采集实战指南:3种高效方法解决内容分析难题

小红书数据采集实战指南&#xff1a;3种高效方法解决内容分析难题 【免费下载链接】xhs 基于小红书 Web 端进行的请求封装。https://reajason.github.io/xhs/ 项目地址: https://gitcode.com/gh_mirrors/xh/xhs 小红书作为中国最大的生活方式分享平台&#xff0c;每天产…...

WebGLStudio.js实时反射技术终极指南:环境映射与反射探针完全解析

WebGLStudio.js实时反射技术终极指南&#xff1a;环境映射与反射探针完全解析 【免费下载链接】webglstudio.js A full open source 3D graphics editor in the browser, with scene editor, coding pad, graph editor, virtual file system, and many features more. 项目地…...

OpenClaw技能市场探秘:千问3.5-9B驱动10种办公自动化

OpenClaw技能市场探秘&#xff1a;千问3.5-9B驱动10种办公自动化 1. 为什么需要技能市场&#xff1f; 去年我接手了一个新项目&#xff0c;每天要处理上百封邮件、整理会议录音、生成周报数据。这些重复性工作占据了我60%的工作时间&#xff0c;直到我发现了OpenClaw的技能市…...

OpenClaw极简安装:Qwen3.5-9B云端体验与快速验证方案

OpenClaw极简安装&#xff1a;Qwen3.5-9B云端体验与快速验证方案 1. 为什么选择云端体验OpenClaw&#xff1f; 上周我在本地尝试部署OpenClaw时&#xff0c;被各种环境依赖折腾得够呛——Node版本冲突、Python包缺失、端口占用问题接踵而至。正当准备放弃时&#xff0c;偶然发…...

Windows 11 家庭版安装 WSL + Docker 踩坑记:从 Store 地狱到 --web-download 救赎

一句话总结当你发现 wsl --update 和 wsl --install 永远卡住、报权限错误或连接重置时&#xff0c;不要挣扎&#xff0c;直接用 --web-download 绕过 Microsoft Store。 这 99% 能解决 Windows 11 家庭版上的 WSL 安装/更新问题。一、问题现象&#xff1a;一切看起来都很正常&…...

从PubMed到知识库:手把手教你用Python把医学文献数据存进MySQL/CSV(含完整代码)

从PubMed到知识库&#xff1a;构建医学文献智能管理系统的Python实战指南 在生物医学研究领域&#xff0c;每天都有数以万计的新文献涌入PubMed数据库。面对如此庞大的知识海洋&#xff0c;研究人员常常陷入两难&#xff1a;如何高效获取目标文献&#xff1f;更重要的是&#x…...

如何设计高质量的API接口:终极完整指南与最佳实践

如何设计高质量的API接口&#xff1a;终极完整指南与最佳实践 【免费下载链接】InterviewGuide &#x1f525;&#x1f525;「InterviewGuide」是阿秀从校园->职场多年计算机自学过程的记录以及学弟学妹们计算机校招&秋招经验总结文章的汇总&#xff0c;包括但不限于C/C…...

鸿蒙开发实战:HDC工具在本地模拟器中的高效调试技巧

1. HDC工具入门&#xff1a;鸿蒙开发的瑞士军刀 第一次接触HDC工具时&#xff0c;我把它当成了鸿蒙版的ADB。但用久了才发现&#xff0c;这个看似简单的命令行工具&#xff0c;其实是鸿蒙开发的万能钥匙。HDC全称Huawei Device Connector&#xff0c;就像它的名字一样&#xff…...