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. Biological Filtration

    http://www.fishyou.com/filtration-biological.php Biological Filtration Biological filtration is the ...

  2. Chap4: question: 19 - 28

    19. 二叉树的镜像(递归) 即:交换所有节点的左右子树.从下往上 或 从上往下 都可以. #include <iostream> #include <string> usin ...

  3. 39. Recover Binary Search Tree && Validate Binary Search Tree

    Recover Binary Search Tree OJ: https://oj.leetcode.com/problems/recover-binary-search-tree/ Two elem ...

  4. 【VB.NET】文本框快捷键支持

    我们知道VB.NET中的文本框是不支持Ctrl+A的快捷键的. 如果让它支持呢? Private Sub txtSQL_KeyDown(ByVal sender As Object, ByVal e ...

  5. 洛谷P3374 【模板】树状数组 1

    P3374 [模板]树状数组 1 140通过 232提交 题目提供者HansBug 标签 难度普及/提高- 提交  讨论  题解 最新讨论 题目描述有误 题目描述 如题,已知一个数列,你需要进行下面两 ...

  6. 关于隐藏input输入内容问题

    如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只 ...

  7. Servlet的过滤器Filter

    Servlet 编写过滤器 Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Serv ...

  8. OAuth2集成

    目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAuth协议的下一个版本,相比OAut ...

  9. VC++ 在控件上写字时 字体的设置技巧

    //人物照片下方的文字 CFont* nFont = &afxGlobalData.fontRegular; CFont* oFont = pDc->SelectObject(nFont ...

  10. scala 学习心得

    scala 安装步骤 文件下载地址:www.scala-lang.org(Please report bugs at https://issues.scala-lang.org/. We welcom ...