webpack的使用一
1.为什么使用webpack
- 模块化,让我们可以把复杂的程序细化为小的文件;
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
- Scss,less等CSS预处理器
- 这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求
2.什么是Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
3.WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

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

如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。
webpack的使用一的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- git 新建工程
之前的一篇文章 https://www.cnblogs.com/wjw-blog/p/7189730.html,按照流程能搭建好git仓库,有时候会有一些小问题. 按照这个流程:-在github 上新 ...
- 没有文件扩展js的脚本引擎
没有文件扩展js的脚本引擎 没有文件扩展js的脚本引擎怎么解决_百度经验 https://jingyan.baidu.com/article/ff42efa93a7ad9c19e2202f0.html
- php源码笔记
php global 你global了一个变量,那么Zend就会去全局symbol_table去寻找,如果找不到,就会在全局symbol_table中分配相应的变量.通过这样的机制,实现了全局变量. ...
- [skill][graphviz] 到底用什么画图: graphviz/inkscape/yed
官方教程文档:http://www.graphviz.org/pdf/dotguide.pdf 一:在文档里抄一个简单的例子 /home/tong/Src/copyright/onescorpion/ ...
- 内部排序->归并排序->2-路归并排序
文字描述 假设初始序列有n个记录,则可看成是n个有序的字序列,每个字序列的长度为1,然后两两归并,得到[n/2]个长度为2或1的有序子序列:再两两归并,…, 如此重复,直到得到一个长度为n的有序序列为 ...
- 《Mysql DML语句》
1:DISTINCT 用于去重,但是需要注意的是,它是用于所有列的,也就是说,除非指定的列全部相同,否则所有的行都会被检索出来. 2:ORDER BY 用于排序,但是应该注意的是,它因该是 SELEC ...
- 【PyQt5-Qt Designer】工具箱(QToolBox)用法讲解
QToolBox() 实现抽屉效果 总体介绍: QToolBox类提供了一列选项卡的小部件(选项卡内含项目). 工具箱是一个小部件,它将选项卡一个一个的显示,当前项目显示在当前选项卡下方.每个选项卡在 ...
- 关系型数据库与NoSQL数据库的优劣
当大家学习了一定的NoSQL知识以后,了解了现今许多NoSQL数据库(如HBase,MongoDB,Redis等)时,就会觉得关系型数据库可能已经跟不上时代的步伐.其实并不然,关系型数据库的性能绝对不 ...
- 集成xxl-job分布式任务调度平台
首先声明,本篇博文基于springboot,基于spring的请自行研究. (一)启动控制平台 首先将xxl-job-master.zip下载下来,然后在mysql数据库创建xxl-job数据库. 执 ...
- 前端 html button标签
就是一个按钮标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...