windows npm安装webpack

 

 

 

Webpack:

Webpack 是一个前端资源加载/打包工具。

它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

参考下图:

 

安装Webpack:

1.首先需要安装node.js(npm)

  下载地址:node.js download

  下载直接安装就OK了。

  安装之后 打开cmd窗口输入node -v、npm -v即可查看相应版本。

  

2.安装Webpack

  任意处创建文件夹(不可命名为webpack,容易冲突报错),cmd进入文件夹下npm init 初始化。回车直至出现Is this ok?输入yes。

  在此过程中npm会为我们创建package.json文件。内容如下图红框。

  

  接下来可以根据自己的选择进行命令安装。

  局部安装:npm install webpack

       npm install webpack-cli

  全局安装:npm install global webpack

       npm install global webpack-cli(生成目录脚手架)

  以全局安装为例:

  

  输入webpack -v出现版本号标识安装成功。

3.使用webpack

  完善package.json加入

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

  webpack默认打包src/index,创建src文件夹并在src下创建index.js

  cmd重新进入测试目录webpackTest运行 npm run dev/build。这时src同级会自动创建dist文件夹(webpack默认输出文件夹)

  当打包报错时,在当前目录下运行npm install 后重新打包。

  新建index.html测试打包

<!DOCTYPE html>
<html>
<head><title>webpack-test</title><script type="text/javascript" src="./dist/main.js"></script>
</head>
<body></body>
</html>

 

转载于:https://www.cnblogs.com/liuliwei/p/9202433.html

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

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

相关文章

JavaFX中的塔防

我想长时间使用我的游戏引擎来编写《塔防》游戏&#xff0c;但是由于另一个小组努力创建JavaFX《塔防》游戏&#xff0c;所以我认为我宁愿创建另一款游戏。 从邮件列表中&#xff0c;我了解到不再开发其他游戏。 因此&#xff0c;我决定尝试一下。 塔防是一款非常适合基于图块…

CSS pointer-events属性的使用

楔子 在前端的开发中&#xff0c;我们都是直接与用户接触&#xff0c;应该尽量让用户感到操作畅快愉悦&#xff0c;获得类似native的感觉。其中动画是最常用的方法。 这里的需求是&#xff0c;弹层的设计&#xff0c;这个弹层希望可以像 native 上的弹层一样&#xff0c;点击…

深入理解JavaScript之Event Loop

前言 最近阅读《高性能JavaScript》时&#xff0c;第六章谈到“通过定时器将JavaScript执行代码的控制权先让给浏览器用于更新UI状态&#xff0c;然后再将控制权交回给JavaScript代码&#xff0c;这样就可以使得页面更为流畅”&#xff0c;就联想到了之前理解的事件循环。 这…

使用EasyPoi导出Excel

Excel模板来自自己写死的一个excel模板&#xff0c;相当于是用户查询数据&#xff0c;数据填充到一个模板的Excel里&#xff0c;再导出Excel /*创建模板*/String a request.getSession().getServletContext().getRealPath("/resource/河南能源化工集团安全监控系统联网系统…

Hazelcast入门

7月&#xff0c;我写了一个博客向Java开发人员介绍erlang&#xff0c;重点介绍了这两种语言之间的一些异同。 erlang虚拟机具有许多令人印象深刻的内置功能&#xff0c;其中之一是它们独立于位置并且可以互相通信。 这意味着可以通过编写很少的代码行在VM之间同步数据。 如果您…

android手机最低内存,原神手机端需要哪些配置 手机端最低配置要求介绍

原神是一款由米哈游自主研发的全新开放世界冒险游戏&#xff0c;游戏最近迎来了pc端的首次测试&#xff0c;而且在不久之后就会开启原神手机端的公测版本&#xff0c;那么手机端需要什么配置呢&#xff1f;小编带来了详细的介绍。移动端预下载&#xff1a;9月25日下午16&#x…

AnswerOpenCV一周佳作欣赏(0615-0622)

一、How to make auto-adjustments(brightness and contrast) for image Android Opencv Image Correctionim using OpenCV for Android. I would like to know,how to make image correction(auto adjustments of brightness/contrast) for image(bitmap) in android via Open…

所有其他指标均无用

对于队列&#xff0c;无论是实现为JMS &#xff0c;数据库表&#xff08;即Ruby的Delayed :: Job用于队列的什么&#xff09;&#xff0c;甚至是Amazon的SQS &#xff0c;用于评估队列状态的最常见指标是其长度。 从本质上讲&#xff0c;可以基于在任何给定时间队列中驻留多少消…

类似苹果数据线的android,除了常见的安卓、苹果、Type-c,还有哪些你不知道的手机数据线?...

随着智能手机日益发展&#xff0c;辅助智能手机的数据线配件也越来越多样。现在我们最常见的无非就是标准Micro usb口、正反随便插的Type-c接口、还有苹果Lightning数据线&#xff0c;那么除了这些类型数据线&#xff0c;你知道如今市面上还有哪些更方便好用的手机数据线吗&…

canvas入门实战--邀请卡生成与下载

1.前言 写了很多的javascript和css3的文章&#xff0c;是时候写一篇canvas的了。canvas是html5提供的一个新的功能&#xff01;至于作用&#xff0c;就是一个画布。然后画笔就是javascript。canvas的用途非常的广&#xff0c;特别是html5游戏以及数据可视化这两个方面。现在can…

Apache ActiveMQ 5.9发布

Apache ActiveMQ团队刚刚发布了新的ActiveMQ 5.9版本 。 Apache ActiveMQ 5.9发布 自从先前的5.8版本以来&#xff0c;此版本是8个月的辛苦工作。 在此发行版中&#xff0c;我们将像往常一样对代理进行增强&#xff0c;并使用最新的协议&#xff08;例如AMQP和MQTT&#xff…

android 美颜录像,Android 关于美颜/滤镜 利用PBO从OpenGL录制视频

前言上次我写了一遍文章《Android 关于美颜/滤镜 从OpenGl录制视频的一种方案》&#xff0c;里面利用ImageReader来从获取Surface上获取数据&#xff0c;但是经过熊皮皮的提醒&#xff0c;我发现多PBO的确可以实现跟ImageReader一样的效果&#xff0c;并且版本要求仅为Android4…

Java对象到对象映射器

我在该项目上使用了Dozer一段时间。 但是&#xff0c;最近我遇到了一个非常有趣的错误&#xff0c;它促使我环顾四周&#xff0c;并尝试使用其他“对象到对象”映射器。 这是我找到的工具列表&#xff1a; 推土机&#xff1a;推土机是Java Bean到Java Bean的映射器&#xff…

android媒体播放框架,Android 使用超简单的多媒体播放器JiaoZiVideoPlayer

在之前的项目中用到了视频播放的功能&#xff0c;在网上看了看使用了大家用的比较多的一个开源项目JiaoZiVideo可以迅速的实现视频播放的相关功能。JiaoZiVideo的简单使用集成了JiaoZiVideo后仅需这几行代码就可以实现播放视频JZVideoPlayerStandard jzVideoPlayerStandard (J…

送福利:ROKID 语音开发板免费送,开启你的物联网之旅

都让一让&#xff0c;我说个事情&#xff1a;掘金联合 Rokid 开发者社区给大家发福利啦&#xff01; 掘金联合 Rokid 开发者社区为大家准备了一些福利&#xff0c;只要秀出你的 skill 和技术栈&#xff0c;就有可能获得 Rokid 全栈语音智能开发套件。 ? Rokid开箱试用活动 活…

如何使用JavaScript控制台改进工作流程

作为Web开发人员&#xff0c;很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志&#xff0c;并在某些情况下格式化显示日志&#xff0c;前端我们会使用断点和控制台&#xff0c;但是我们浏览器的控制台比我们想象的要强大得多。 当我们考虑控制台时&#xff0c…

select、poll、epoll之间的区别总结[整理]

原文:https://www.cnblogs.com/Anker/p/3265058.html 好文章收藏下&#xff0c;慢慢品味 select&#xff0c;poll&#xff0c;epoll都是IO多路复用的机制。I/O多路复用就通过一种机制&#xff0c;可以监视多个描述符&#xff0c;一旦某个描述符就绪&#xff08;一般是读就绪或者…

JPA(七):映射关联关系------映射双向多对一的关联关系

映射双向多对一的关联关系 修改Customer.java package com.dx.jpa.singlemanytoone;import java.util.Date; import java.util.HashSet; import java.util.Set;import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; impo…

如何优雅的绘制一棵省市区三级可选择的树?

开始 总结一下 开发过程中的思路想法 各位大佬们看看就好 首先你拥有的数据结构 所有省市区的信息列表 以及已经选中的信息 用的是element-ui的 el-tree const cityStorage {provinceList:[{id: 1, provinceId: "110000", name: "北京市"}],//所有省ci…

html click事件 参数,vue 实现click同时传入事件对象和自定义参数

这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数&#xff0c;具有很好的参考价值&#xff0c;希望对大家有所帮助。一起跟随小编过来看看吧仅仅传入自定义参数HTMLdddddJS代码new Vue({el:#app,methods:{tm:function(e){console.log(e);}}})仅仅传入事件对象HTML…