webpack安装步骤(一)

news2024/9/21 15:29:48

系列文章目录


安装步骤

  • 系列文章目录
  • 前言
  • 一、Webpack是什么?
    • Webpack官网解释
    • 解释内容如下图
  • 二、Webpack的安装步骤
    • 第一步:检查本机是否已经安装过Webpack(全局)
      • 1.操作如下
      • 2.结果如下图
    • 第二步:安装webpack(非全局)
      • 1.创建一个文件(vscode或者终端打开)
      • 2.执行项目初始化命令(不明白可以点🔗)
        • 执行命令如下(下面🔗有解释)
        • 具体如下图
      • 3.执行安装webpack命令
        • 命令如下
        • 成功如下图
  • 总结(必看必看⚠️⚠️)


前言

1.好长一段时间都没自己去搭建一个项目了,大多数情况下都是用公司的脚手架一键生成的!!!!

2.今天就来回顾一下,Webpack从安装到创建的整个流程


一、Webpack是什么?

Webpack官网解释

这里是直接使用的官网的描述!!!!! 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependencygraph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

解释内容如下图

在这里插入图片描述

二、Webpack的安装步骤

第一步:检查本机是否已经安装过Webpack(全局)

1.操作如下

在打开的终端里面,执行webpack -v 或者 webpack --version
如果控制台出现了webpack的版本(请检查是否是你需要的版本)

2.结果如下图

在这里插入图片描述

第二步:安装webpack(非全局)

1.创建一个文件(vscode或者终端打开)

在这里插入图片描述

2.执行项目初始化命令(不明白可以点🔗)

执行命令如下(下面🔗有解释)

此处可以一路回车,直接进行初始化(不太了解每一步是做什么的,可以点👇🔗)
npm init 解释

具体如下图

在这里插入图片描述

3.执行安装webpack命令

命令如下

npm install webpack webpack-cli --save-dev 在全局和开发环境安装webpack

成功如下图

package种可以看到安装的依赖!

在这里插入图片描述


总结(必看必看⚠️⚠️)

如果是全局安装的webpack通过 webpack -v或者webpack --version 查看安装的版本

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

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

相关文章

利用无线通讯技术构建工厂智能化立体仓储

立体仓库主要通过检测、信息识别、控制、通信、监控调度、大屏显示及计算机管理等装置组成。完成仓库各设备连接无线化,可大幅减少网线布防成本,缩短生产线调度时间,实现汽车装配生产线的柔性生产,提高汽车装配生产的自动化水平。…

短视频的素材在哪里找呢?推荐给你一个好办法

我刚刚在视频号做出了30万播放的小爆款,过去3年我做出了很多6位数播放的视频。在这里,我就大家分享20个我常用的素材渠道,其中一些渠道比较小众。除此之外,我也希望同时讲一下短视频的内容生产。为了方便大家浏览,我把…

使用web3连接Georli测试网络

文章目录1.使用geth方式在终端2.写成脚本2.1 通过metamask (现成的太复杂,搞不太来)2.2 通过自己的接口3.通过truffle方式连接 (不成功)目前的工作情况是,已在remix写好执行合约并部署在Georli测试网络中&a…

NJ 时钟自动调整功能(SNTP)

NJ 时钟自动调整功能(SNTP) 实验设备:NJ501-1300 实验目的:NJ使用ntp实现时钟自动调整 1. 实验概览 ​ 本次实验通过NJ的ntp功能,将PLC的时钟和阿里的ntp服务器时钟每隔1分钟同步一次。 阿里ntp服务器的域名为:ntp.aliyun.com…

Python fileinput模块:逐行读取多个文件

前面章节中,我们学会了使用 open() 和 read()(或者 readline()、readlines() )组合,来读取单个文件中的数据。但在某些场景中,可能需要读取多个文件的数据,这种情况下,再使用这个组合&#xff0…

力扣56.合并区间

文章目录力扣56.合并区间题目描述排序合并力扣56.合并区间 题目描述 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中…

windows上配置IIS全过程

文章目录1️⃣ 配置IIS1.1 从开始打开服务器管理1.2 添加角色和功能1.3 添加角色和功能向导1.4 按照如下步骤选择2️⃣ 问题:缺少源文件解决方案优质资源分享作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/1…

与感受野相关的几种网络结构

一、Inception 1. Inception v1 目的 通过设计一个稀疏网络结构,但是能够产生稠密的数据,既能增加神经网络表现,又能保证计算资源的使用效率。 结构 图1-1 Inception v1结构图 特点 共4个通道,其中3个卷积通道分别使用111111…

HashTable和HashMap的区别详解

一、HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长。 HashMap是非线程安全的,只是用于单线程环境…

Velocity实战笔记

基础准备 velocity模板语法简介 官方实例 版本环境 <dependency><groupId>org.apache.velocity</groupId><artifactId>velocity</artifactId><version>1.7</version></dependency>标签介绍 <Workbook><DocumentPr…

STM32 DFU模式烧录代码

什么是DFU? dfu的本质是isp&#xff0c;usb接口的isp&#xff0c;在系统编程&#xff0c;进入isp的方式我们先了解 如下图 boot0为高电平 boot1为低电平即可进入isp模式。 熟悉的场景 在我们使用flymcu软件下载代码时&#xff0c;本质也是isp 串口接口的isp。 傻瓜使用方式…

RF电路的分布参数集中参数化

文章目录1.威尔金森功分器的集总参数设计例1&#xff1a;ADS仿真:设计一个工作在1GHz的威尔金森功分器2.分支线定向耦合器的集总参数设计例2&#xff1a;ADS仿真设计一个分支线的定向耦合器&#xff0c;中心频率&#xff1a;920MHz3.总结射频电路的分析会引入分布参数分析的理论…

刷题专练之翻转题练习

文章目录一、 编写函数实现字符串翻转二、轮转数组总结一、 编写函数实现字符串翻转 描述 编写一个函数&#xff0c;实现字符串的翻转 输入描述&#xff1a; 输入一个字符串 输出描述&#xff1a; 输出翻转后的字符串 写法一&#xff1a; 这种方法是定义begin和end&#xff0…

Nacos详细使用操作文档(图文详细)

文章目录Nacos详细使用操作文档(图文详细)1、安装2、Nacos作为注册中心2.1、Nacos服务注册【ICRMS】2.2、Nacos 服务调用2.2.1、Feign 远程调用【Personnel】2.2.2)、RestTemplateRibbon 远程调用【Personnel】3、Nacos作为配置中心4、Nacos 命令空间5、Nacos配置文件参数详解N…

Java 基础面试题——异常

目录1.Exception 和 Error 有什么区别&#xff1f;2.Throwable 类中常用方法有哪些&#xff1f;3.Checked Exception 和 Unchecked Exception 有什么区别&#xff1f;4.throw 和 throws 的区别是什么&#xff1f;5.try-catch-finally 如何使用&#xff1f;6.finally 块中的代码…

4.3 PBR

1. 实验目的 熟悉PBR的应用场景掌握PBR的配置方法2. 实验拓扑 PBR实验拓扑如图4-8所示: 图4-8:PBR 3. 实验步骤 (1) IP地址的配置 R1的配置 <Huawei>system-view

缓存Redis常见面试题

一、Redis概念Redis是⼀个⾼性能的key-value数据库&#xff0c;它是完全开源免费的&#xff0c;⽽且redis是⼀个NOSQL类型数据库&#xff0c;是为了解决⾼并发、⾼扩展&#xff0c;⼤数据存储等⼀系列的问题⽽产⽣的数据库解决⽅案&#xff0c;是⼀个⾮关系型的数据库。二、Red…

【Git】git常用命令总结

简言 git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 里面有很多常用的命令语法&#xff0c;在此做一个常用命令总结记录&#xff0c;以备不时之需。 命令总结 由于git是基于linux开发的工具&#xff0c;所以有个特点&a…

网安新基建!国内首个“网络安全卓越中心”落地南京江宁

​​近日&#xff0c;国内首个网络安全卓越中心&#xff08;“CyberPeace Center of Excellence”简称“CPCOE”&#xff09;落地南京市江宁区&#xff0c;项目金额数千万元&#xff0c;由赛宁网安建设运营。CPCOE旨在提高全民数字素养、培育网安人才、提升关基防御能力、促进安…

阿里P6细谈Python简易接口自动化测试框架设计与实现,我直呼内行

1、开发环境 操作系统&#xff1a;Ubuntu18 开发工具&#xff1a;IDEAPyCharm插件 Python版本&#xff1a;3.6 2、用到的模块 requests&#xff1a;用于发送请求 xlrd&#xff1a;操作Excel&#xff0c;组织测试用例 smtplib&#xff0c;email&#xff1a;发送测试报告 l…