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　　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。