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. SourceInsight 精确导入Linux kernel源码的方法

    相信有很多人用 SourceInsight 查看 Linux Kernel 源码,但导入源码时会遇到一些问题.1.如果把整个源码树都导入进去,查看符号定义的时候,会发现有大量重复定义,很难找到正确的位 ...

  2. Chap3: question: 11 - 18

    11. double 数值的整数次方 note: 浮点数表示时有误差,判等时必须自己根据精度要求实现. #include <iostream> #include <ctime> ...

  3. Django base view

    class django.views.generic.base.View 它是基类的基类,其它View基类都是从这继承的. 官例: from django.http import HttpRespon ...

  4. （转载）关于web端功能测试的测试方向

    一.功能测试 1.1链接测试 链接是web应用系统的一个很重要的特征,主要是用于页面之间切换跳转,指导用户去一些不知道地址的页面的主要手段,链接测试一般关注三点: 1)链接是否按照既定指示那样,确实链 ...

  5. MVC 自定义IModelBinder实现json参数转Dictionary<string, string>

    IModelBinder的学习不算深入,现在用它来实现一个json转Dictionary<string, string> 一.原始json转Dictionary<string, st ...

  6. <meta http-equiv="refresh" content="0; url=">是什么意思？

    页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用中, ...

  7. JS函数arguments数组获得实际传参数个数

    JS与PHP在函数传参方面有点不同,PHP形参与实参个数要匹配,而JS就灵活多了,可以随意传参,实参比形参少或多都不会报错. 实参比形参多不会报错 ? 1 2 3 4 5 function say(a ...

  8. js动态改变时间

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. Windows 7 下如何设置机器级别的DCOM权限

    Windows 7 下如何设置机器级别的DCOM权限 To grant Remote Activation permissions to the SMS Admins group From the S ...

  10. asp.net项目下的web service返回json数据问题

    App_Code目录下放置WebService.cs文件,文件内容如: using System; using System.Collections.Generic; using System.Dat ...