庫的打包：
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.入口文件：獲取入口文件，分析入口文件
最后調用即可；