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的区别及实例搭建的更多相关文章

  1. webpack和gulp的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

  2. webpack与gulp的区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js. ...

  3. Webpack与Gulp、Grunt区别

    Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  4. Gulp和webpack的作用和区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文 ...

  5. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  6. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  7. Webpack vs Gulp

    Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...

  8. Webpack vs Gulp(转载)

    理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...

  9. Webpack和Gulp对比

    Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...

随机推荐

  1. 如何删除控制文件中过去rman备份到磁带的备份集

    问题描述: 早上做数据库巡检,发现FRA(flash recovery area)空间使用率达到66%,是平时的两倍.由于库不大,备份策略是本地磁盘备份,每天一全备,REDUNDANCY 1 ,备份完 ...

  2. iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用

    http://blog.csdn.net/totogo2010/article/details/8016129 GCD很好的博文

  3. SQL SERVER触发器游标小记

    今天接到个需求用触发器来实现通过条件对其他表的更新.好久没摸SQL SERVER,电脑里也没SQL SERVER安装包,同事遂发来个安装包,一看吓一跳,3.6G!!!!经过漫长等待后,开始作业.需求如 ...

  4. php标记，变量，常量

    php标记 语法:有4种书写格式 1.<?php ... ?>  强烈推荐使用. 如果当前 php的代码段,是整个文档的最后一段,可以省略结束标记?(建议省略) 每句语句都要以分号;结束. ...

  5. [已解决]EnvironmentError: mysql_config not found

    $ pip install MySQL-python==1.2.5 报错: EnvironmentError: mysql_config not found 原因是缺少包 libmysqlclient ...

  6. js节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  7. struts2 xml中重定向

    <result name="success" type="redirect">ManagePartAction</result> 重定向 ...

  8. 8.9 CSS知识点2

    4.关系选择符 包含选择符(Descendant combinator) E F  选择所有被E元素包含的F元素 <style type="text/css"> h1 ...

  9. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

  10. node中的可读流和可写流

    javascript的一个不足之处是不能处理二进制数据,于是node中引入了Buffer类型.这个类型以一个字节(即8位)为单位,给数据分配存储空间.它的使用类似于Array,但是与Array又有不同 ...