webpack是什么，提到這個(gè)概念箩张，很多人可能立馬說(shuō)出來(lái)甩骏，模塊化加載器兼打包工具，可以把各種資源都作為模塊來(lái)使用和處理等等先慷。
說(shuō)到前端構(gòu)建工具饮笛，不可避免的會(huì)提到gulp，到底webpack和gulp有什么區(qū)別呢论熙？開(kāi)始的時(shí)候我也不是很清楚福青，總感覺(jué)不到他們的差別，后來(lái)仔細(xì)研究了一下才發(fā)現(xiàn)其中的區(qū)別脓诡。
首先无午，其實(shí)webpack只是具有前端構(gòu)建的功能而已，其實(shí)本質(zhì)來(lái)說(shuō)webpack是一種模塊化的解決方案類(lèi)似require.js一樣祝谚，只不過(guò)通過(guò)插件實(shí)現(xiàn)了構(gòu)建工具的一些功能宪迟，例如通過(guò)less－loader可以編譯less為css并作為模塊可以被調(diào)用。gulp是通過(guò)一系列插件將原本復(fù)雜繁瑣的任務(wù)自動(dòng)化交惯，是一個(gè)純粹的工具次泽，并不能將你的css等非js資源模塊化，但是webpack可以做到這些席爽∫饣纾總的來(lái)說(shuō)，gulp是一個(gè)自動(dòng)化任務(wù)的工具拳昌，所以你可以通過(guò)gulp來(lái)配置webpack的文件袭异。
webpack的優(yōu)點(diǎn)如下：
1. webpack 遵循commonJS 的形式钠龙，但對(duì) AMD/CMD 的支持也很全面炬藤，方便舊項(xiàng)目進(jìn)行代碼遷移。
2. 能被模塊化的不僅僅是 JS 碴里，所有的靜態(tài)資源沈矿，例如css，圖片等都能模塊化咬腋，即以require的方式引入羹膳。
3. 開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作根竿，比如打包陵像、壓縮混淆、圖片轉(zhuǎn)base64等寇壳。
具體webpack如何使用可以通過(guò)一個(gè)很簡(jiǎn)單的demo項(xiàng)目來(lái)了解一下：
首先醒颖，在git上新建一個(gè)項(xiàng)目，同時(shí)全局安裝webpack壳炎。（當(dāng)然首先你要先安裝了node）
npm install webpack -g（可能需要sudo權(quán)限）泞歉。
安裝之后可以通過(guò)webpack -v來(lái)查看當(dāng)前版本。如果顯示如下所示，說(shuō)明安裝成功
Hash: 507b96dfc644d4199f75
? Version: webpack 1.12.15
2, 通過(guò)packge.json配置依賴(lài)腰耙。通過(guò)npm install加載npm模塊榛丢，接下來(lái)分析需要什么依賴(lài)什么插件，
1）webpack肯定要先行依賴(lài)的
? 2）本項(xiàng)目中存在js挺庞，html晰赞，less三部分，js不需要通過(guò)loader轉(zhuǎn)換选侨，所以需要less-loader宾肺，但基本的樣式loader時(shí)肯定需要的所以要依賴(lài)三個(gè)插件，less-loader侵俗、css-loader锨用、style-loader。如下所示：
復(fù)制代碼
"dependencies": {
? ? "cnpm": "^4.2.0",
? ? "css-loader": "^0.23.1","less-loader": "^2.2.3",
? ? "style-loader": "^0.13.1",
? ? "webpack": "^1.12.15"
? }
復(fù)制代碼
3隘谣，使用webpack.config.js進(jìn)行配置管理增拥，類(lèi)似于gulpfile.js（遵循common.js的規(guī)范）
首先? 要引入webpack
復(fù)制代碼
var webpack = require('webpack');
module.exports = {
? ? entry: './js/index',//頁(yè)面入口文件配置
? ? //文件輸出配置
? ? output: {
? ? ? ? path: __dirname,//當(dāng)前文件package.json的路徑
? ? ? ? filename: '/dist/index.js'//打包之后輸出的文件，即dist下的index.js
? ? },
? ? module: {
? ? ? ? //加載器配置
? ? ? ? loaders: [{
? ? ? ? ? ? test: /\.less$/,
? ? ? ? ? ? loader: "style-loader!css-loader!less-loader"
? ? ? ? }]
? ? }
}
復(fù)制代碼
4寻歧，建相應(yīng)文件夾及文件
1）html只需要加載打包之后的文件掌栅，即dist/下的indx.js即可，無(wú)需和原來(lái)一樣分別加載js和css
2）index.less里就是簡(jiǎn)單的less語(yǔ)法的樣式（以檢查css是否生效）：
body{
? color: red;
}
3)模塊文件alerts.js里簡(jiǎn)單的返回字符串码泛，以供測(cè)試猾封。
module.exports = 'this is webpack demo by 瀟湘待雨';
4）入口文件里，引入less文件和模塊alerts.js噪珊。
復(fù)制代碼
require('../less/index.less');//引入less文件
var alerts = require('./alerts.js');//模塊js文件
alert('so, it is so easy to use webpack');
document.write(alerts);
復(fù)制代碼
5.執(zhí)行npm run build
查看是否成功晌缘，執(zhí)行命令可以配置在gulp文件里也可以配置在package.json里。此處配置在package.json中：
"scripts": {
? ? "build": "webpack"
? },
至此一個(gè)簡(jiǎn)單的基于webpack的demo搭建完成
