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. poj 3083 Children of the Candy Corn

    点击打开链接 Children of the Candy Corn Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8288 ...

  2. [转]CABasicAnimation用法

    CABasicAnimation用法   CABasicAnimation 自己只有三个property   fromValue  toValue  ByValue 当你创建一个 CABasicAni ...

  3. vs 2013 Express 无法启动程序xxx.exe,系统找不到指定文件

    由于实验室有人用了含病毒的软件,网管把实验室出口给封了,周末人家又不上班.看样子树莓派是玩不成了,所以昨天在宿舍写windows程序,最基本的窗口程序,听说这段代码初学者至少要自己敲5遍以上.代码如下 ...

  4. 剑指Offer:面试题23——从上往下打印二叉树(java实现)

    问题描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 按照层次遍历的方法,使用队列辅助. 1.将根结点加入队列. 2.循环出队,打印当前元素,若该结点有左子树,则将其加入队列,若 ...

  5. 九、DAG hierarchy

    DAG 节点有两种,Transformation/shape. shape节点是transformation的子节点. transformation节点包括position, rotation, sc ...

  6. google快捷键

          使用快捷键的好处不言自明,如果能过直接访问google自然有对应的帮助文档以供参考,不过为了方便起见,还是将自己觉得有用的信息收藏到自己访问无障碍的地方吧! 一:以下快捷键适用于Windo ...

  7. （http://fonts.googleapis.com/css?）打开很慢解决方案

    把fonts.googleapis.com替换为fonts.useso.com即可

  8. centos7.2上实践cgoup

    基本介绍 CGroups 是一种对进程资源管理和控制的统一框架,它提供的是一种机制,而具体的策略(Policy)是通过子系统(subsystem)来完成的.子系统是CGroups对进程组进行资源控制的 ...

  9. Repeater控件 ---属性（ItemCommand事件）

    epeater的Command操作:1.ItemCommand事件 - 在Repeater中所有能触发事件的控件,都会来触发这一个事件 2.CommandName - 判断点击的是什么按钮,e.Com ...

  10. C++之jsoncpp学习

    最新由于客户端要用到jsoncpp,所以自己也跟着项目的需求学了一下jsoncpp.以前没用过xml,但是感觉接触json后,还蛮好用的. 参考地址 http://jsoncpp.sourceforg ...