webpack的安装

news2024/11/17 15:31:03

webpack是当前前端最热门的前端资源模块化管理和打包工具。

安装webpack

首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件。Webpack至少需要Node.js v0.6版本,直接安装最新版就好了。

1.nodeJs官网,像安装其他软件一样,选择最新的包进行安装即可;

2.安装完成后,window用户,按住 微软徽标+R ,打开运行,输入cmd,打开命令行;

3.输入

node -v,查看当前nodeJs版本

看到这个版本号就表示安装成功了

4.输入 

npm install webpack -g (-g表示global全局安装)

安装完成后,使用webpack -v 检查当前版本

C:\Users\...\npm\webpack 为全局webpack所在的文件夹路径;

5.输入

webpack -h ,可以进入webpack的帮助界面

可以查看基本配置指南

6.虽然已经全局安装了webpack ,但是我们通常还是会在项目中安装局部的webpack,为了安装各自需要的模块;

7.首先cd 到项目目录,可以鼠标将目标文件夹拖拽到命令窗口

8.如果没有packjson.json ,则使用npm init 命令创建,packjson.json用来展示依赖资源包的列表等信息,为了方便维护,最好创建此文件

Package.json 属性说明

name- 包名。

version- 包的版本号。

description- 包的描述。

homepage- 包的官网 url 。

author- 包的作者姓名。

contributors- 包的其他贡献者姓名。

dependencies- 依赖包列表。如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下。

repository- 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。

main- main 字段是一个模块ID,它是一个指向你程序的主要项目。就是说,如果你包的名字叫 express,然后用户安装它,然后require("express")。

keywords- 关键字

                          除了name,其它无需必填enter即可

yes即可

9.接下来,局部安装webpack 

输入命令:npm install webpack --save-dev

10.如果你想安装指定版本的webpack ,输入命令

 npm install webpack@2.2.x --save-dev

11.如果需要使用 Webpack 开发工具,要单独安装:

npm install webpack-dev-server --save-dev


 

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

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

相关文章

Luckysheet本地导入时报错‘luckysheet‘ is not defined【已解决】

本文包含luckysheet本地安装以及报错解决,性子急可以直接按照目录划拉! 目录 一、本地导入 二、报错luckysheet is not defined解决 最近正在开发的项目中需要类excel功能的东西,经过调研后决定用luckysheet,Luckysheet在线表格…

vite + vue3 —— vue地图大屏项目

​回顾 前期 ​ 前端利器 —— 提升《500倍开发效率》 传一张设计稿,点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点,那么我觉得就是它会,让你cv大法都没处使!!!比如…

React 面向组件编程(下)

目录前言:一、受控组件与非受控组件1. 受控组件2. 非受控组件3. 效果展示4. 总结:二、组件的生命周期1. 对生命周期的理解2. 生命周期的三个阶段(旧)3. 生命周期的三个阶段(新)4. 新旧生命周期的区别5. 重要…

微信小程序项目实例——扫雷

今日推荐💁‍♂️ 2023许嵩演唱会即将到来🎤🎤🎤大家一起冲冲冲🏃‍♂️🏃‍♂️🏃‍♂️ 🔮🔮🔮🔮🔮往期优质项目实例&#x1f52e…

JavaWeb之Cookie详解(一)

一.Cookie简介 Cookie是在HTTP协议下,服务器维护客户工作站上信息的一种方式,其作用是维护服务端与客户端浏览器的会话状态。由于HTTP协议的特点是无状态性,它对于事务处理没有记忆能力,所以服务端不会记录当前客户端浏览器的访问…

image-conversion 图片压缩,vue

image-conversion ,vue,element 需求:需要用户上传图片时候,对大尺寸图片进行压缩,减小图片大小,减少服务器的压力。 用到的第三方插件image-conversion 文档: https://www.npmjs.com/packag…

vue2 前端导出el-table表格为Excel文件 (自带样式)

前话:我只是个自学到工作的小菜鸟,如果有大佬有更好的方法,希望不吝赐教。 1.电脑环境 node版本 14.20.0 vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本(即webpack5)的会有很多问题,解决办法写在后边)…

echarts:实现3D地图版块叠加动效散点+轮播高亮效果

需求描述 如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路 首先是3D地图版块效果的实现,可以参考广州3D地图;而动效散点的实现,可以参考地图发散分布。 这里再提一个经过尝试并不行的思…

大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS

文章目录📚web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合💌表白网页 125套 (集合)💙Echarts大屏数据展示 150套 (集合)一、基于HTMLEcharts技术制作二、基于VUEEcharts技术制作🎁更多源码📚web前端期末大作…

统计网站访问量(自己开发)

网站的运营者或者开发者肯定都想知道,自己网站每天的使用情况。比如每天有多少访问量、用户都点击哪些功能、用户对网站上哪些功能感兴趣。知道了这些信息才能定位网站后面的开发方向,比如持续优化点击率高的模块 、裁撤用户不感兴趣的模块,打…

【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多 1,onReachBottom 上拉触底后加载更多(未固定表头) 页面结构: <view class"box"><table border"0"><thead><th>名称</th><th style&qu…

解决axios异步请求问题(异步变为同步)

遇到的问题 在目前一个需求中&#xff0c;我需要等待axios请求完成后&#xff0c;判断请求是否出现异常&#xff0c;然后来判断是否关闭弹窗 修改后大概代码如下&#xff1a; async submitForm() {let flag false//表单验证&#xff0c;默认通过let formValidation truethis…

HTML小游戏22 —— html5版疯狂光头强网页游戏(附完整源码)

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…

利用nvm下载nodejs

利用nvm下载nodejs 在开发过程会一直遇到nodejs的版本问题&#xff0c;直接安装则只有一个版本&#xff0c;极其不方便nvm则是用来管理nodejs的工具&#xff0c;可以通过nvm来安装切换不同版本的nodejs安装前需要先卸载自己原有的node版本&#xff0c;不然那会有可能报错。卸载…

在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

在vue3vite项目下按需引入vant报错Failed to resolve import解决方案问题描述原因分析解决方案问题描述 近日尝试使用vitevue3vant开发项目过程中&#xff0c;参考vant官网开发指南->快速上手->引入组件 按照上述配置好后&#xff0c;运行vite环境报错&#xff1a;Fai…

【JavaScript】【5】定时器(包含回调函数与Promise)

文章目录前言一、回调函数二、 Promisepromise对象Promise对象的生成加载图片写成一个Promise三、定时器与清除定时器的方法四、京东购物车倒计时案例五、发送验证码案例在这里插入图片描述总结前言 什么是定时器 JavaScript提供定时执行代码的功能&#xff0c;叫做定时器&…

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目 文章目录【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目写在前面一、Vue CLI脚手架1.1 认识Vue CLI1.2 Vue CLI 安装和使用二、Vue create 项目的过程2.1 创建项目2.2选择 Manually select features创建2.3 选择Vue的版…

Vue Router4 ,prams 传参失效和报错问题

Vue3 使用 Vue Router 时&#xff0c;prams 传参失效和报错问题 我尝试使用 prams 传递数据 <script setup> import { useRouter } from vue-routerconst router useRouter() const params { id: 1, name: ly, phone: 13246566476, age: 23 } const toDetail () >…

HTML 实现仿 Windows 桌面主题特效

&#x1f482; 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】&#x1f91f; 风趣幽默的人工智能学习网站&#xff1a;&#x1f449;人工智能&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&a…

vue 方法按照顺序执行

在调用后台方法的时候&#xff0c;由于调用了多个方法&#xff0c;但是执行的时候并没有按照顺序执行&#xff0c;前端需要后台返回的数据&#xff0c;对数据进行页面展示&#xff0c;由于没有按照顺序执行&#xff0c;导致前台页面报错。解决办法采用new Promise单独执行每个方…