webpack 是什么赖钞？
webpack是模塊化管理工具，使用webpack可以對(duì)模塊進(jìn)行壓縮聘裁、預(yù)處理雪营、按需打包、按需加載等衡便。
webpack 有哪些重要特征献起？
插件化：webpack本身非常靈活，提供了豐富的插件接口镣陕∏床停基于這些接口，webpack開(kāi)發(fā)了很多插件作為內(nèi)置功能呆抑。
速度快：webpack使用異步IO以及多級(jí)緩存機(jī)制岂嗓。所以webpack的速度是很快的，尤其是增量更新鹊碍。
豐富的Loaders：loaders用來(lái)對(duì)文件做預(yù)處理厌殉。這樣webpack就可以打包任何靜態(tài)文件食绿。
高適配性：webpack同時(shí)支持AMD/CommonJs/ES6模塊方案。webpack會(huì)靜態(tài)解析你的代碼公罕，自動(dòng)幫你管理他們的依賴關(guān)系器紧。此外，webpack對(duì)第三方庫(kù)的兼容性很好熏兄。
代碼拆分：webpack可以將你的代碼分片品洛，從而實(shí)現(xiàn)按需打包。這種機(jī)制可以保證頁(yè)面只加載需要的JS代碼摩桶，減少首次請(qǐng)求的時(shí)間桥状。
優(yōu)化：webpack提供了很多優(yōu)化機(jī)制來(lái)減少打包輸出的文件大小，不僅如此硝清，它還提供了hash機(jī)制辅斟，來(lái)解決瀏覽器緩存問(wèn)題。
開(kāi)發(fā)模式友好：webpack為開(kāi)發(fā)模式也提供了很多輔助功能芦拿。比如SourceMap士飒、熱更新等。
使用場(chǎng)景多：webpack不僅適用于web應(yīng)用場(chǎng)景蔗崎，也適用于Webworkers酵幕、Node.js場(chǎng)景
webpack 如何最佳配置？
webpack官方提供的配置方法是通過(guò)module.exports返回一個(gè)json缓苛，但是這種場(chǎng)景不靈活芳撒，不能適配多種場(chǎng)景。
比如要解決：production模式和development模式未桥，webpack的配置是有差異的笔刹，大致有兩種思路。
1冬耿、兩份配置文件webpack.config.production.js/webpack.config.development.js舌菜，然后不同場(chǎng)景下，使用不同的配置文件亦镶。
2日月、通過(guò)module.exports返回函數(shù)，該函數(shù)能接受參數(shù)缤骨。
相對(duì)來(lái)說(shuō)山孔，第一種更簡(jiǎn)單，但是重復(fù)配置多荷憋；第二種更靈活台颠，推薦第二種方式。
那么，按返回函數(shù)的方式的配置代碼架子如下：
module.exports = function(env) {
return {
context: config.context,
entry: config.src,
output: {
path: path.join(config.jsDest, project),
filename: '[name].js',
chunkFilename: '[name].[chunkhash:8].js',
publicPath: '/assets/' + project + '/'
},
devtool: "eval",
watch: false,
profile: true,
cache: true,
module: {
loaders: getLoaders(env)
},
resolve: {
alias: getAlias(env)
},
plugins: getPlugins(env)
};
}
其中關(guān)鍵的配置這兒簡(jiǎn)單介紹如下串前，后續(xù)的系列博客會(huì)根據(jù)每個(gè)點(diǎn)詳細(xì)介紹瘫里。
context：上下文。
entry：入口文件荡碾，是所有依賴關(guān)系的入口谨读，webpack從這個(gè)入口開(kāi)始靜態(tài)解析，分析模塊之間的依賴關(guān)系坛吁。
output：打包輸出的配置劳殖。
devtools：SourceMap選項(xiàng)，便于開(kāi)發(fā)模式下調(diào)試拨脉。
watch：監(jiān)聽(tīng)模式哆姻，增量更新，開(kāi)發(fā)必備玫膀！
profile：優(yōu)化矛缨。
cache：webpack構(gòu)建的過(guò)程中會(huì)生成很多臨時(shí)的文件，打開(kāi)cache可以讓這些臨時(shí)的文件緩存起來(lái)帖旨，從而更快的構(gòu)建箕昭。
module.loaders：如前文介紹，loaders用來(lái)對(duì)文件做預(yù)處理解阅。這樣webpack就可以打包任何靜態(tài)文件落竹。
resolve.alias：模塊別名，這樣可以更方便的引用模塊货抄。
plugins：如前文介紹筋量，webpack的一些內(nèi)置功能均是以插件的形式提供。
webpack和gulp的區(qū)別
gulp是基于流的構(gòu)建工具：all in one的打包模式碉熄，輸出一個(gè)js文件和一個(gè)css文件，優(yōu)點(diǎn)是減少http請(qǐng)求肋拔，萬(wàn)金油方案锈津。
webpack是模塊化管理工具，使用webpack可以對(duì)模塊進(jìn)行壓縮凉蜂、預(yù)處理琼梆、打包、按需加載等窿吩。
