CONSULTING QIAN1
咨询千一
选择下列产品马上在线沟通
微信扫码咨询
咨询电话:0833-2134912
你可能遇到了下面的问题
关闭右侧工具栏
webpack与gulp的区别及实例搭建
  • 作者:千一科技
  • 发表时间:2018-07-25 19:45
  • 来源:未知

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

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"
  },