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搭建完成,此處只是我的的一點看法,但願拋磚引玉引來大神們的指教。