webpack与gulp的区别及实例搭建
webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等。
说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有什么区别呢?开始的时候我也不是很清楚,总感觉不到他们的差别,后来仔细研究了一下才发现其中的区别。
首先,其实webpack只是具有前端构建的功能而已,其实本质来说webpack是一种模块化的解决方案类似require.js一样,只不过通过插件实现了构建工具的一些功能,例如通过less-loader可以编译less为css并作为模块可以被调用。gulp是通过一系列插件将原本复杂繁琐的任务自动化,是一个纯粹的工具,并不能将你的css等非js资源模块化,但是webpack可以做到这些。总的来说,gulp是一个自动化任务的工具,所以你可以通过gulp来配置webpack的文件。
webpack的优点如下:
1. webpack 遵循commonJS 的形式,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS ,所有的静态资源,例如css,图片等都能模块化,即以require的方式引入。
3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
具体webpack如何使用可以通过一个很简单的demo项目来了解一下:
首先,在git上新建一个项目,同时全局安装webpack。(当然首先你要先安装了node)
npm install webpack -g(可能需要sudo权限)。
安装之后可以通过webpack -v来查看当前版本。如果显示如下所示,说明安装成功
Hash: 507b96dfc644d4199f75 Version: webpack 1.12.15
2, 通过packge.json配置依赖。通过npm install加载npm模块,接下来分析需要什么依赖什么插件,
1)webpack肯定要先行依赖的
2)本项目中存在js,html,less三部分,js不需要通过loader转换,所以需要less-loader,但基本的样式loader时肯定需要的所以要依赖三个插件,less-loader、css-loader、style-loader。如下所示:
"dependencies": {
"cnpm": "^4.2.0",
"css-loader": "^0.23.1","less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.12.15"
}
3,使用webpack.config.js进行配置管理,类似于gulpfile.js(遵循common.js的规范)
首先 要引入webpack
var webpack = require('webpack');
module.exports = {
entry: './js/index',//页面入口文件配置
//文件输出配置
output: {
path: __dirname,//当前文件package.json的路径
filename: '/dist/index.js'//打包之后输出的文件,即dist下的index.js
},
module: {
//加载器配置
loaders: [{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
}
}
4,建相应文件夹及文件
1)html只需要加载打包之后的文件,即dist/下的indx.js即可,无需和原来一样分别加载js和css
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="../dist/index.js"></script>
</head>
2)index.less里就是简单的less语法的样式(以检查css是否生效):
body{
color: red;
}
3)模块文件alerts.js里简单的返回字符串,以供测试。
module.exports = 'this is webpack demo by 潇湘待雨';
4)入口文件里,引入less文件和模块alerts.js。
require('../less/index.less');//引入less文件
var alerts = require('./alerts.js');//模块js文件
alert('so, it is so easy to use webpack');
document.write(alerts);
5.执行npm run build
查看是否成功,执行命令可以配置在gulp文件里也可以配置在package.json里。此处配置在package.json中:
"scripts": {
"build": "webpack"
},
至此一个简单的基于webpack的demo搭建完成,此处只是个人的一点见解,希望抛砖引玉引来大神们的指教。
源码git地址:https://github.com/xiaoxiangdaiyu/webpack_demo.git
webpack与gulp的区别及实例搭建的更多相关文章
- webpack和gulp的区别
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...
- webpack与gulp的区别
gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js. ...
- Webpack与Gulp、Grunt区别
Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...
- Gulp和webpack的作用和区别
gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文 ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- Webpack vs Gulp
Webpack vs Gulp 谁会被拍死在沙滩上 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...
- Webpack vs Gulp(转载)
理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...
- Webpack和Gulp对比
Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...
随机推荐
- httperf学习笔记(CentOS-6.6环境下安装配置)
新工作已经找到了,最近在忙着熟悉环境,昨天领导让我接触下httperf压力测试工具 百度了下,相关的文档,准备着手配置一个测试环境基于linux系统httperf+autobench+gnuplot, ...
- 简单来谈谈alloc分配器
之前说道alloc是原G2.9版本的默认的分配器,这篇就把alloc的原理梳理梳理,顺便简单介绍下有关的内存管理. 一般而言,我们通常习惯的内存分配操作和释放操作是这样的: class Foo {…} ...
- VBS操作剪切板
'设置剪切板的内容 Dim Form, TextBox Set Form = CreateObject("Forms.Form.1") Set TextBox = Form.Con ...
- OAuth2集成
目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAuth协议的下一个版本,相比OAut ...
- 手机刷机软件与ROM的盈利模式分析
一. 智能手机的兴起不过短短几年时间,更新迭代已经让实体键盘成为回忆.智能手机带来的是人们生活习惯的改变,对于手机的重度依赖,是好是坏不去评价.智能手机相对于之前的手机最大的改变不仅仅是屏幕的飞速变大 ...
- DIOCP之数据接收事件
一.不引用编码器与解码器的情况下(ECHO的DEMO) 类TIOCPtcpclient,接收服务器的数据事件:OnRecvBuffer 类TDiocpTcpServer,接收客户端数据事件:OnRec ...
- 转载:PuTTY的自动登录设置
转自:http://blog.segmentfault.com/zair/1190000000639516 PuTTY是Windows下非常好用的SSH远程登陆客户端.本文介绍两种自动登录的设置方法. ...
- __iter__
[__iter__] 如果一个类想被用于for ... in循环,类似list或tuple那样,就必须实现一个__iter__()方法,该方法返回一个迭代对象,然后,Python的for循环就会不断调 ...
- C 语言 *** glibc detected *** free(): invalid next size (fast): 0x0000000000be1010 ***
. . . . . LZ 今天在写一个 Socket 程序的时候使用 malloc(3) 在堆上动态分配了一个结构体的空间,在使用完之后用 free(3) 函数释放空间的时候报 invalid nex ...
- 违反并发性: UpdateCommand影响了预期 1 条记录中的 0
今天遇到这个错误,看到下面这种说法都没解决问题: 1 检查是否设有主键.2 DeleteCommand的问题:检查是否含有自动编号字段(Access的自动编号字段可能会引发此异常): UpdateC ...