一、模塊化系統演進：
1、傳統：
<script src=“module.js”>標簽；
2、commonJS：
協同require（）同步加載，再通過exports或module.exports來導出需要暴露的接口；不能加載多個模塊；不適合瀏覽器加載。
3、AMD:
異步require，通過接口define（） 異步加載；可并行加載多個模塊；適合瀏覽器。
4、CMD:
類似AMD；
5、UMD:
是模塊跨平臺解決方案；
6、ES6:
盡量靜態化；編譯時就能確定模塊的依賴關系及輸入輸出變量；CommonJs和AMD都只能在運行時確定這些東西。
優點：靜態分析，提前編譯；面向未來的標準；
缺點：
1、瀏覽器原生兼容性差，所以一般都編譯成ES5。
2、目前可以拿來即用的模塊少，生態差。
7、期望的模塊：
可以兼容多種模塊風格，盡量可以利用已有的代碼，不僅僅只是 JavaScript 模塊化，還有 CSS、圖片、字體等資源也需要模塊化。
二、gulp&webpack區別：
gulp是基于流的構建工具：all in one的打包模式，輸出一個js文件和一個css文件，優點是減少http請求，萬金油方案。
webpack是模塊化管理工具，使用webpack可以對模塊進行壓縮、預處理、打包、按需加載等。
三、webpack概念：
webpack是模塊化管理工具，使用webpack可以對模塊進行壓縮、預處理、按需打包、按需加載等。
四、webpack9個特征：
（1）插件化：webpack本身非常靈活，提供了豐富的插件接口。基于這些接口，webpack開發了很多插件作為內置功能。
（2）速度快：webpack使用異步IO以及多級緩存機制。所以webpack的速度是很快的，尤其是增量更新。
（3）豐富的Loaders：loaders用來對文件做預處理。這樣webpack就可以打包任何靜態文件。
（4）高適配性：webpack同時支持AMD/CommonJs/ES6模塊方案。webpack會靜態解析你的代碼，自動幫你管理他們的依賴關系。此外，webpack對第三方庫的兼容性很好。
（5）代碼拆分：webpack可以將你的代碼分片，從而實現按需打包。這種機制可以保證頁面只加載需要的JS代碼，減少首次請求的時間。
（6）優化：webpack提供了很多優化機制來減少打包輸出的文件大小，不僅如此，它還提供了hash機制，來解決瀏覽器緩存問題。
（7）開發模式友好：webpack為開發模式也提供了很多輔助功能。比如SourceMap、熱更新等。
（8）使用場景多：webpack不僅適用于web應用場景，也適用于Webworkers、Node.js場景。
（9）優點：webpack并不強制你使用某種模塊化方案，而是通過兼容所有模塊化方案讓你無痛接入項目，當然這也是webpack牛逼的地方。
有了webpack，你可以隨意選擇你喜歡的模塊化方案，至于怎么處理模塊之間的依賴關系及如何按需打包，放輕松，webpack會幫你處理好的。
五、webpack配置及參數解析：
1、兩份配置文件webpack.config.production.js/webpack.config.development.js，然后不同場景下，使用不同的配置文件。
2、通過module.exports返回函數，該函數能接受參數。
相對來說，第一種更簡單，但是重復配置多；第二種更靈活，推薦第二種方式。
webpack 如何最佳配置？
webpack官方提供的配置方法是通過module.exports返回一個json，但是這種場景不靈活，不能適配多種場景。比如要解決：production模式和development模式，webpack的配置是有差異的，大致有兩種思路。
1、兩份配置文件webpack.config.production.js/webpack.config.development.js
，然后不同場景下，使用不同的配置文件。
2、通過module.exports返回函數，該函數能接受參數。
相對來說，第一種更簡單，但是重復配置多；第二種更靈活，推薦第二種方式。那么，按返回函數的方式的配置代碼架子如下：
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)
};
}
其中關鍵的配置這兒簡單介紹如下：
context：上下文。
entry：入口文件，是所有依賴關系的入口，webpack從這個入口開始靜態解析，分析模塊之間的依賴關系。
output：打包輸出的配置。
devtools：SourceMap選項，便于開發模式下調試。
watch：監聽模式，增量更新，開發必備！
profile：優化。
cache：webpack構建的過程中會生成很多臨時的文件，打開cache可以讓這些臨時的文件緩存起來，從而更快的構建。
module.loaders：如前文介紹，loaders用來對文件做預處理。這樣webpack就可以打包任何靜態文件。
resolve.alias：模塊別名，這樣可以更方便的引用模塊。
plugins：如前文介紹，webpack的一些內置功能均是以插件的形式提供。
六、webpack樣式：
內嵌css（不推薦）、獨立的css、公共的css樣式；
七、模塊化機制特點：
1、可以兼容多模塊風格，無痛遷移老項目。
2、一切皆模塊，js/css/圖片/字體都是模塊。
3、靜態解析（確定依賴關系，輸入輸出的變量），按需打包，動態加載。（webpack最優秀的地方）；
webpack提供的loaders可以對文件做預處理，從而實現了一切皆模塊。
八、webpack對模塊做了什么？
（1）非模塊化代碼；（2）Runtime & 模塊；（3）AMD模塊；（4）CommonJs；
九、代碼分塊：chunk--程序塊；
（1）CommonJs require.ensure(dependencies, callback)；
（2）AMD require(dependencies, callback)
十、分塊類型：
（1）入口塊 entry chunk；（2）普通塊 normal chunk；
（3）初始塊 initial chunk；（4）多入口塊；
十一、gulp&webpack整合：
1、目的：
前端工程化；更好的管理前端代碼；
2、怎么管理：
gulp：處理html壓縮/預處理/條件編譯，圖片壓縮，精靈圖自動合并等任務；
webpack：管理模塊化，構建js/css。
3、怎么整合：
（1）webpack-stream方案[不推薦]；
（2）webpack原生方案；
十二、怎么組織代碼：
gulp那一套、webpack原生方案；
十三、特別強調--webpack最優秀的地方：
預處理；按需加載；
webpack提供的require（）方法和require.ensure（）方法來實現，即AMD和commonJS規范；
十四、按需加載的時間戳：
rake任務；
十五、常用插件：
1、解析壓縮美化chunk：UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options])；
2、分離css文件；ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");
3、刪除重復依賴；DedupePlugin new webpack.optimize.DedupePlugin()；
4、跳過編譯出錯并記錄；NoErrorsPlugin new webpack.NoErrorsPlugin()；
5、提取公共模塊；CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options)；
