從概念上捆等，gulp和webpack不是一個層次的東西蛾绎。但是在現(xiàn)在的前端項目中，他們承擔的角色卻越來越類似握童，打包冀值，擾碼也物，開發(fā)，調試列疗，css處理等等滑蚯。
Bower vs NPM
對于處理JS依賴這一塊，Bower通過wiredep把JS壓縮到一個bundle里面抵栈，一般來說告材，不需要自己來處理依賴；wiredep也相當智能古劲，可以通過分析bower_components里面需要添加到one_page入口的文件中斥赋。例如，Angular通過package.json中指定的main把需要的index.js放到html中产艾，如下疤剑。
{
"name": "angular",
"version": "1.5.11",
"description": "HTML enhanced for web apps",
"main": "index.js",
...
}
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
從某種意義上，bower的這種做法更加簡單和便捷闷堡，省去的程序員處理依賴的過程隘膘。但是Bower本身的能力受限，在Why we should stop using Bower一文中杠览，提到了bower遇到的一些問題弯菊。
- Bower不支持嵌套依賴。
- Bower本身的冗余性踱阿。
- Bower的不可靠性管钳。
個人認為，bower本身是有很多問題软舌，例如才漆，bower的publish是任何人都可以發(fā)布，沒有驗證正確性葫隙。也可能是因為NPM的后繼這Yarn的包管理工具的推出栽烂，更多的開發(fā)者更愿意在npm/yarn上進行開發(fā)。總之腺办，現(xiàn)在的大趨勢更趨向于支持npm焰手。
Webpack
可以通過https://github.com/lishan/OCProject/tree/master/Webpack下載完整例子。
為了用后臺的聲明依賴的方式進行前端開發(fā)怀喉，使用webpack來進行打包將是大勢所趨书妻。以下是在爬坑中遇到的一些問題。
- Webpack Config可否支持es6?
使用webpack.config.babel.js代替webpack.config.js即可躬拢，這個和gulpfile.babel.js的方式類似躲履。
- Webpack使用打包文件，如何debug?
Webpack提供一個參數(shù)devtool = 'inline-source-map'聊闯，表示在瀏覽器上查看的時候是單獨的文件所在行工猜，一般應用于dev環(huán)境中。
- Webpack作為一個standalone cli有哪些配置項菱蔬？
如下是例子項目中提供的一些命令篷帅，使用npm run build之類的可以運行提供的功能。
--progress 顯示進度
--profile 顯示build時間
--bail 遇到第一個錯誤時退出
"scripts": {
"build": "webpack --bail --progress --profile --config webpack/webpack.prod.babel.js",
"start": "npm run server",
"server": "babel-node server/app.js",
"prod": "webpack-dev-server --inline --content-base ./dist --config webpack/webpack.prod.babel.js"
},
- 如何直接用node運行es6程序拴泌？
可以通過babel-node代替node命令魏身。
- 常用的Webpack plugin?
通過Webpack plugin可以做gulp plugin類似的工作，所以在引言中提到他們的作用已經越來越相似蚪腐。
new HtmlWebpackPlugin({ //生成入口的html文件箭昵，可以通過模板生成，支持ejs, handlebars語法
template: './app/index.html'
}),
new ExtractTextPlugin("styles.css")//抽取style-loader中的到單獨文件
new CleanWebpackPlugin(['dist']),//刪除一個文件夾
new CopyWebpackPlugin([{ //拷貝一些文件
from: path.resolve(__dirname, '..', 'app', '404.html')
}]),
new UglifyJSPlugin() //JS壓縮
- Webpack-dev-server vs webpack-dev-middleware?
這兩個扮演的是gulp中一般使用一個express上部署工程回季。相同的是家制，他們生成的文件目錄都是放在內存中的，不會像運行webpack生成dist目錄茧跋。
webpack-dev-middleware可以和express結合慰丛，我們在示例中采用這樣的方式，在express上我們可以配置我們的RESTAPI層瘾杭。和以前的項目類似。
- Angular的Controller例子哪亿？
給出一段示例代碼粥烁，需要注意的是$scope這樣的注入項必須采用這種AMD方式，否則在uglify中會有Unknow provider的錯誤蝇棉。
import angular from 'angular';
export default angular.module('basic').controller('MainCtrl',['$scope', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
}]);
