webpack分享小記

多入口多出口

一般項目的需求：

• 構建咱們發佈須要的 HTML、CSS、JS 文件
• 使用 CSS 預處理器來編寫樣式
• 處理和壓縮圖片
• 使用 Babel 來支持 ES 新特性
• 本地提供靜態服務以方便開發調試

resolve模塊路徑解析

• resolve.alias
• resolve.extensions
• resolve.modules
• resolve.mainFiles
• resolve.resolveLoader

loader 模塊代碼轉換的工做由 loader 來處理，除此以外的其餘任何工做均可以交由 plugin 來完成

• 重要的幾個概念：入口，loader，plugin，輸出

• loader 的匹配規則中有兩個最關鍵的因素：一個是匹配條件（test,include,exclude,and,or,not），一個是匹配規則後的應用(loader名字)。 use 來指定須要用到的 loader 對於一些不須要解析依賴（即無依賴） 的第三方大型類庫等，能夠經過這個字段來配置，以提升總體的構建速度。 module.noParse noParse: /jquery|lodash/

plugin 不過因爲須要提供不一樣的功能，不一樣的插件自己的配置比較多樣化。

• copy-webpack-plugin複製文件
• IgnorePlugin(內置插件) 忽略某些模塊 例如moment.js日期類庫，裏面有許多i18n代碼，致使打包後的文件較大，而實際場景又不須要這些，忽略本地化的內容 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

webpack-dev-server

• before 在 webpack-dev-server 靜態資源中間件處理以前，能夠用於攔截部分請求返回特定內容，或者實現簡單的數據 mock

• after 在 webpack-dev-server 靜態資源中間件處理以後，比較少用到，能夠用於打印日誌或者作一些額外處理。

• 中間件就是在 Express 之類的 Web 框架中實現各類各樣功能（如靜態文件訪問）的這一部分函數。多箇中間件能夠一塊兒協同構建起一個完整的 Web 服務器。

• webpack-dev-middleware（express提供的webpack-dev-server靜態服務能力的中間件）

• webpack-dev-middleware 的好處是能夠在既有的 Express 代碼基礎上快速添加 webpack-dev-server 的功能，同時利用 Express 來根據須要添加更多的功能，如 mock 服務、代理 API 請求等。

• 首先咱們要明白，對於 webpack 的配置，實際上是對外暴露一個 JS 對象，因此對於這個對象，咱們均可以用 JS 代碼來修改它

Hot Module Replacement

• HMR 能夠理解爲加強版的 Hot Reloading，但不用整個頁面刷新，而是局部替換掉部分模塊代碼而且使其生效，能夠看到代碼變動後的效果

• webpack 內部運行時，會維護一份用於管理構建代碼時各個模塊之間交互的表數據，webpack 官方稱之爲 Manifest，其中包括入口代碼文件和構建出來的 bundle 文件的對應關係

• 目前weback4.x中只須要將hot：true就能夠了，不須要手動引入HotModuleReplacementPlugin

優化前端資源加載：

• 圖片壓縮，dataUrl,
• 分離代碼，靜態文件，利用瀏覽器緩存機制
• js：按需加載代碼（import） 代碼壓縮（uglify：Tree shaking --刪除沒有用到的代碼,有時候卻沒有刪除掉，babel搞得鬼），sideEffects （https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md）

提高webpack打包速度

resolve優化：

減小 resolve 的解析

1. resolve.extensions：用來代表文件後綴列表，默認查找順序是 ['.js', '.json']，若是你的導入文件沒有添加後綴就會按照這個順序查找文件。咱們應該儘量減小後綴列表長度，而後將出現頻率高的後綴排在前面
2. resolve.alias：能夠經過別名的方式來映射一個路徑，能讓 Webpack 更快找到路徑
3. module.noParse：若是你肯定一個文件下沒有其餘依賴，就可使用該屬性讓 Webpack 不掃描該文件，這種方式對於大型的類庫頗有幫助

loader優化：

特別是由於 Babel 會將代碼轉爲字符串生成 AST，而後對 AST 繼續進行轉變最後再生成新的代碼，項目越大，轉換代碼越多，效率就越低

1. 優化 Loader 的文件搜索範圍
2. HappyPack能夠將 Loader 的同步執行轉換爲並行的
3. node_modules裏面的代碼都是編譯過的，因此沒有必要再去處理一遍，經過（ exclude: /node_modules/）排除掉
4. Babel 編譯過的文件緩存起來，下次只須要編譯更改過的代碼文件便可，這樣能夠大幅度加快打包時間（loader: 'babel-loader?cacheDirectory=true'）

plugin優化

• 換種方式處理圖片： 咱們能夠直接使用 imagemin 來作圖片壓縮，編寫簡單的命令便可。而後使用 pre-commit 這個類庫來配置對應的命令，使其在 git commit 的時候觸發，而且將要提交的文件替換爲壓縮後的文件。不用每次運行打包項目都壓縮圖片

• 使用 DLLPlugin打包公共代碼，將公共代碼抽離成單獨文件的優化方案（css）

• optimization.concatenateModules:true 分析出模塊之間的依賴關係，儘量的把打包出來的模塊合併到一個函數中去

webpack 整個構建流程