webpack与gulp的区别及实例搭建

时间 2019-11-17

原文原文链接

　　webpack是什么，提到这个概念，不少人可能立马说出来，模块化加载器兼打包工具，能够把各类资源都做为模块来使用和处理等等。css

　　说到前端构建工具，不可避免的会提到gulp，到底webpack和gulp有什么区别呢？开始的时候我也不是很清楚，总感受不到他们的差异，后来仔细研究了一下才发现其中的区别。html

　　首先，其实webpack只是具备前端构建的功能而已，其实本质来讲webpack是一种模块化的解决方案相似require.js同样，只不过经过插件实现了构建工具的一些功能，例如经过less－loader能够编译less为css并做为模块能够被调用。gulp是经过一系列插件将本来复杂繁琐的任务自动化，是一个纯粹的工具，并不能将你的css等非js资源模块化，可是webpack能够作到这些。总的来讲，gulp是一个自动化任务的工具，因此你能够经过gulp来配置webpack的文件。前端

　　webpack的优势以下：node

　　　　1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。webpack

　　　　2. 能被模块化的不单单是 JS ，全部的静态资源，例如css，图片等都能模块化，即以require的方式引入。git

　　　　3. 开发便捷，能替代部分 grunt/gulp 的工做，好比打包、压缩混淆、图片转base64等。 github

　　具体webpack如何使用能够经过一个很简单的demo项目来了解一下：web

　　首先，在git上新建一个项目，同时全局安装webpack。（固然首先你要先安装了node）npm

　　　　npm install webpack -g（可能须要sudo权限）。json

　　　　安装以后能够经过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　　　　　　

1 <head>
2     <meta charset="UTF-8">
3     <title>index</title>
4     <script src="../dist/index.js"></script>
5 </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　　