webpack4實戰配置

庫的打包：

          1.讓打包後用戶能夠引用

             使用libraryTarget:umd  //umd讓各類方法都能引用，如import ....等

            library:' '  //支持<script>的引用,能夠自定義任何變量

           

             增長全局變量後，就能夠調用方法了

    2.本身庫裏引用了第三方庫，而用戶引用了本身庫，又引用了這個第三方庫，形成重複

           使用externals，打包時，不打包第三方庫，而是要用戶在本身的業務代碼中引用

           

 

            3.上傳到npm網站 ,方便安裝使用

                  修改package.json中的mian的路徑爲打包後dist裏面js路徑

                  

 

                     而後 npm adduser登陸上，npm publish直接發佈到npm倉庫，就能夠了，

                     packjson.json裏面的name就是庫的名字，可是不能與npm已有庫重複

 

PWA：Progressive Web Application，不同的緩存

               頁面加載成功後斷網，再刷新，就不顯示這個網站，PWA的技術就解決了這個問題：斷網後，已加載的模塊仍是可以顯示

                 安裝第三方模塊 workbox-webpack-plugin能夠實現

                  npm install workbox-webpack-plugin --save-dev

                  在webpack.prod.js線上配置中使用：

                   

                      

                      當時這只是最基礎的，若是須要這方面業務，還須要查閱相關文檔

 

TypeScript的打包配置

                安裝typescript和ts-loader;

                  npm install typescript ts-loader --save-dev

                  typescript額外須要一個配置項tsconfig.js

                  

              在typescript中，import引用第三方庫，如常見的lodash,會報錯，說lodash不是模塊，這個時候就要安裝@type；

            loadsh是      npm install @type/loader --save

            相關的類庫types支持能夠在typesearch上查詢。

            引入方法import _ from 'lodash'

                          import * as _ from 'lodash',

            若是調用第三方庫的方法，會方便檢查出錯誤

 

devServer.proxy:接口請求轉發

                     在webpack的基礎部分，已經學習了devserver的基礎配置，這裏要說的是接口代理proxy;

                     簡而言之，就是開發接口和線上接口要一致，減小麻煩；

                     使用方法：開發階段寫真實接口，devServer只是開發時啓用的，在裏面作接口代理proxy

        例：axios.get('/api/header.json');  當請求api接口時，轉而請求http://www.xxxx.com/header.json這個接口

                        

                     還有其餘參數：當你請求/api/header.json時，會轉發到http://www.xx.com/header.json這個接口，

                      pathRewrite若是是header,json接口，就請求demo.json接口，最終請求的http://www.xx.com/demo.json     

                           

                    若是請求的https:開頭的，secure:false

                         

                      多路徑同時轉發：

                          

                      對根路徑作接口代理 '/':{}是不行的,需設置Index：false或空：

                      

                     有些網址設置了origin的限制，就不能獲取到轉發獲得接口：

                      建議全部proxy都設置changeOrigin:true的參數，能夠突破這個限制；

                       

                      還能夠配置請求頭信息，或者cookie模擬登錄：

                    、

 

devServer.historyApiFallback:            

                 建議設置爲true就行！！！

 

              由於單頁引用刷新頁面時訪問的資源在服務端找不到，始終是404，設置爲true，任意的404頁面都加載首頁index.html

              

                 等價於下面，訪問任意網址，都會展示langing.html的內容，可配置

                    

 

ESLint在webpack的配置:

                安裝npm install eslint  --save-dev

                安裝後初始化配置  npx selint --init,

                結合VScode編輯平的eslint插件檢查就能夠了，

                合做時，有些開發人員可能沒有這個插件，安裝 eslint-loader,配置到webpack中也能夠發現錯誤，再設置devServer.overlay:true，能夠彈出錯誤，方便發現，作到統一

 

webpack性能優化：

                 1.儘量使用新版本的webpack,node,npm

                 2.使用合理使用loader,讓做用範圍更加精準

                   exclude排除第三方插件loader的轉化；                     

                    

                  include只轉換src文件裏面loader；

                   

                 3.合理使用plugins插件，儘量精簡併確保可靠，好比開發環境和生產環境所需的不一樣插件，應該分開用

                  4.合理使用resolve

                   extensins省略尾巴，建議只省略js之類的邏輯文件，不要.css .jpg等都省略，由於這個運行時，每次都會查找一下，耗性能；

                   alias別名，文件位置太深，使用別名能夠快速調用

                  

                  5.使用DllPlugin插件，一般是大型項目必備：

                     將使用的第三方庫第一次單獨打包到一個文件內，以後的每一次打包直接調用便可；

                     

                    A. 新建一個配置項webpack.dll.js，單獨用來打包第三方模塊，獲得一個單獨的js文件

                     

                   B.獲得的js文件咱們不可能手動引入，麻煩，要在配置中寫好，打包後，讓模板本身引入，在webpack.common.js中引入一個插件 add-asset-html-webpack-plugin:在html中增長靜態資源的引入；

                   npm install add-asset-html-webpack-plugin --save

                   

                  引入插件後，再使用，將dll.js靜態資源自動插入index.html中

                   

                   C.第三方模塊打包一次已實現，接下來就是每次打包使用第三方模塊時，使用已打包好的模塊，再也不用node_modules裏面的第三方模塊

                   在webpacl.dll.js配置中引用DllPlugin分析打包的第三方庫模塊

                   

                   

                   D.在webpack.common.js中使用插件DllReferencePlugin，根據分析的結構決定是從打包的庫中拿，仍是node_modules中拿；

                    

                大型項目中就能提升打包速度。。。。。   

                 6.控制包文件大小，用不到的包要注意；

 

多頁面打包配置：

                就是多配置htmlWebpackPlugin而已；

                入口變成多個     

                 

                輸出成不一樣的html

                

 

如何編寫一個loader 

                loader是一個函數，下面實現一個簡單的loader;

               這個loader能將world字符轉化爲yxy

               source就是引入的js內容

               

               使用時同樣，只是是引用路徑

               

               經過這兩部就實現了一個簡單的loader及使用；使用時，能夠傳遞參數

               注意：loader中不能使用箭頭函數，否則this指向不對，獲取不到參數

               

 

               在loader的函數中 this.callback()做用和renturn同樣；不過返回的信息更多；

                  this.callback(錯誤信息，內容，映射日誌，其餘參數)；

               在loader函數中使用異步，必須異步執行完畢後再返回出去，否則會報錯；

                   使用this.async()函數，就能夠實現；

                   

 

如何編寫一個Plugin:

              原理：發佈訂閱模式

              plugin是一個類;

              下面編寫一個簡單的插件

              

 

 

webpack原理分析：

                 1.入口文件：獲取入口文件，分析入口文件

                  

                  最後調用便可；