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" },
至此一個簡單的基於webpack的demo搭建完成，此處只是個人的一點見解，希望拋磚引玉引來大神們的指教。
源碼git地址：https://github.com/xiaoxiangdaiyu/webpack_demo.git