webpack 入门

什么是WebPack,为什么要使用它?

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

开始使用Webpack

初步了解了Webpack工作方式后,我们一步步的开始学习使用Webpack。

安装

Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample progect),在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

  1. 在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

 

转载于:https://www.cnblogs.com/liqiang431/p/5911091.html

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

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

相关文章

使用vsftp虚拟用户实现安全访问控制

一、ftp连接方式 1、命令连接 ftp在与用户交互时,首先打开的是TCP的21号端口,建立命令连接,这个连接会始终存在,直到用户输入bye的那一刻,才断开命令连接。 2、数据连接 1)主动连接 主动连接是基于TCP21号端…

【前端就业课 第二阶段】CSS 零基础到实战(04)定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、定位 定位分为相对定位以及绝对定位。 相对定位可以理解为在 HTM…

Android TextView设置ClickableSpan 点击结尾空白位置也响应点击的问题

解决办法,在后边紧接着追加一个0宽度字符: builder.append("\u200b"); 相关知识: “\u200b” 为 Unicode Character ‘ZERO WIDTH SPACE’ (U200B),可用于内容标识,不占位数(宽度0&#xff0…

【MATLAB统计分析与应用100例】案例017:matlab读取Excel数据,进行变量系统聚类分析

1. 变量系统聚类分析结果 2. matlab完整代码 (1)读取数据,并转为距离向量 [X,textdata] = xlsread(examp09_03.xls); % 从Excel文件中读取数据 y = 1 -

Wordpress:将图片、post等的URL转换为相对路径

2019独角兽企业重金招聘Python工程师标准>>> 例如上传一张图片,其地址是可能 http://127.0.0.1/wp-content/uploads/2015/12/1_.png, 问题是如果我们通过其他的电脑通过wordpress主机的公网IP访问这张图片时会提示找不到。 最好的处理方法是不…

【MATLAB统计分析与应用100例】案例018:matlab读取Excel数据,进行K均值聚类分析

文章目录 1. K均值聚类分析结果2. matlab完整代码(1)读取数据,并进行标准化变换(2)选取初始凝聚点,进行聚类(3)绘制轮廓图1. K均值聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化变换 [X, textdata] = xlsread(examp09_04.xls

CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、流动布局 流动布局有3种布局模型,分别是流动布局&…

DVWA系列之24 high级别上传漏洞

最后再来分析high级别的代码:这里首先有一条语句需要理解:$uploaded_ext substr($uploaded_name, strrpos($uploaded_name, .) 1);在这条语句里,首先利用strrpos() 函数来查找“.”在变量$uploaded_name中出现的位置,然后将得到…

WPF 基础控件之 TreeView 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider TreeView 实现下面的效果1)TreeView来实现动画;Grid 分两…

HTML Animation 【前端就业课 第二阶段】CSS 零基础到实战(06)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、Animation 基础 使用 Animation 可以设置帧动画,与 tr…

史上最全的Visual Studio Code安装C/C++环境,若不行头砍给你。

一、下载Visual Studio Code安装 下载链接地址 二、安装C/C++插件 输入c/c++, 然后点击那里install 三、下载MinGW配置环境变量 下载地址 进入网站后不要点击 "Download Lasted Version",往下滑,找到最新版的 "x86_64-posix-seh"。

C# 11 新特性:泛型 Attribute

之前使用JsonConverterAttribute,我们可以为任意类型自定义 Json 序列化。例如:[JsonConverter(typeof(UserJsonConverter))] public class User {public string Name { get; set; }public override string ToString(){return Name;} }public class User…

NA-NP-IE系列实验实验15:RIPv2 手工汇总

实验15:RIPv2 手工汇总1.实验目的 通过本实验可以掌握:(1)RIPv2 路由的手工汇总(2)RIPv2 不支持CIDR 汇总(3)RIPv2 可以传递CIDR 汇总2.拓扑结构 实验拓扑如图 所示。3.实验步骤 路由…

CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、transform-origin transform-origin 用于更改当前元素的中心点&am…

【微服务专题之】.Net6下集成微服务网关-Ocelot

微信公众号:趣编程ACE关注可了解更多的.NET日常实战开发技巧,如需源码 请公众号后台留言 源码;[如果觉得本公众号对您有帮助,欢迎关注].Net6下集成微服务网关-Ocelot网关常见功能1:路由 routing2: 请求聚合3:身份验证和…

ArcGIS实验教程——实验二十七:时态数据可视化----以飓风路径为例

实验效果预览: ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 文章目录 1. 时态数据简介2. 时态数据的存储方式3. 时态数据显示实例---飓风路径1. 时态数据简介 时态数据 代表某个时间点的状态,如 1990 年香港的土地利用状况或 2009 年 7 月…

02 控制器《ThinkPHP6 入门到电商实战》

文章目录(更新中…) 01 thinkphp6的前期开发准备《ThinkPHP6 入门到电商实战》 02 控制器《ThinkPHP6 入门到电商实战》 03 数据库查询、模型查询、多库查询《ThinkPHP6 入门到电商实战》 04 tp6 的查数据《ThinkPHP6 入门到电商实战》 05 tp6 的数据添…

聊聊C# CLR中那些大量的友元函数,友元类的底层玩法

一:理解友元 如果你看过 CLR 代码就会发现这里面有很多的 friend 修饰符, 比如: MethodTable.cpp 文件下。class MethodTable {/************************************* FRIEND FUNCTIONS************************************/// DO NOT ADD FRIENDS UNLESS ABSOL…

【详细】长按APP图标弹出快捷方式,ShortCut功能实现

Shortcuts介绍 Android7.1(API Level 25)及以上系统可以自定义Shortcuts,通过在桌面上长按App Icon弹出Shortcut列表,点击某个shortcut可使用户快捷得打开App里常用的或推荐的任务。国内各个厂商基本上在安卓8.0上集成了该功能。…

ArcGIS实验教程——实验二十八:统计图表(饼状图、柱状图)制作

统计图表(饼状图、柱状图)预览: ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 文章目录 1. 制作图表2. 在地图上显示图表1. 制作图表 加载甘肃行政区划数据。 打开数据的属性表,可以看到有面积、人口、GDP、土地利用等字段。