webpack與gulp的區別及實例搭建

  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  

相關文章
相關標籤/搜索