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. Flex中设置Camera的视频清晰质量的最佳配合

    今天需要设置Flex中的Camera组件的一些属性,后来发现清晰度不是很高,于是捣鼓了上午半天,设置了很多的参数,竟然发现手册上就是有现成的一些设置方法,郁闷!不过我还是专门设置了几个有用和必要的属性 ...

  2. 【转】CwRsync简介

    rsync是linux下一款用于同步文件的优秀软件,window下也可以使用它,不过名字为cwRsync.cwRsync也分为客户端和服务端,官方网址:https://www.itefix.no/i2 ...

  3. 26. Binary Tree Maximum Path Sum

    Binary Tree Maximum Path Sum Given a binary tree, find the maximum path sum. The path may start and ...

  4. GLSL语言基础

    from http://www.kankanews.com/ICkengine/archives/120870.shtml 变量 GLSL的变量命名方式与C语言类似.变量的名称可以使用字母,数字以及下 ...

  5. C# 指定物理目录下载文件，Response.End导致“正在中止线程”异常的问题

    FileHandler http://www.cnblogs.com/vipsoft/p/3627709.html UpdatePanel无法导出下载文件: http://www.cnblogs.co ...

  6. 小杨同学git使用记(适合使用过git但是不熟练的童鞋)

    首先声明:这不是一篇git使用手册或者指南,如果要详细的git使用指南,下面是廖雪峰的git教程,可以系统学习廖雪峰的git教程,当然,如果你想马上以一种正确的方式使用git,那么接下来你很快就会学会 ...

  7. Visual Studio 2013新建工程导入现有代码文件夹并且保持目录结构

    本文提供了一个在Windows环境下使用Visual Studio 2013编辑现有源代码并且保持目录结构的方法.本文使用VS2013中文社区版做示例(本版本为免费版,可在VS官网下载),其他版本的V ...

  8. linq to entity中遇到的问题

    当使用 from m in _db.students从数据库中获取数据时,数据库中的数据类型和C#中的不同,所以可能会出错!先作_db.students.ToList()然后select

  9. bash脚本编程之一 变量、变量类型等

    变量的内容 1.变量命名:            1.只能包含字母.数字和下划线,并且不能以数字开头,    2.不应该跟系统中已有的环境变量重名    3.最好能见名知意 2.变量赋值: 设置变量: ...

  10. PHP调试总结

    PHP调试总结一,环境方面,比如查看安装扩展是否生效,是总支持某扩展.可以在web目录中建一个phpinfo.php在里面输入<?phpphpinfo();?>在浏览器上访问一下,会输出P ...