一 webpack 配置五大重要概念？
1.entry：入口文件
2.output:出口文件
3.loader：翻譯官
4.plugin：插件
5.mode："development','production'
二 webpack 常用的loader
1.處理樣式 ： [style-loader,css-loader,postcss-loader,sass-loader]。生產環境下不採用style-loader，改用 MiniCssExtractPlugin.loader。 postcss-loader 用於處理css兼容性問題，需要通過postcss.config.js 對需要兼容的瀏覽器版本進行配置
2.處理圖片資源：url-loader; url-loader是基於file-loader的 ，url-loader能配置limit 屬性，當圖片大小 低於limit值，就會生成base64 文件嵌入文檔中。大於limit值，就會採用file-loader進行處理，將按照原文件格式輸出到指定的文件夾下，並可以重命名。
3.處理html中的圖片文件： html-loader
4.處理js，ts，jsx，tsx
--> eslint-loader ,先進行檢查，需要配置enforce：'pre',以及 .eslintrc文件。配置 .prettierrc文件，配合eslint 編譯器，webstorm能採用快捷鍵(shift + ctrl + alt + p)，快速修復當前文檔所有存在問題的es-lint報錯
--> babel-loader ， 將ts、tsx，jsx 或者高版本的 es標準 編譯成瀏覽器能夠識別的 es5版本。採用preset corejs 按需加載兼容性配置，@babel/preset-typescript 和 處理 jsx 或者tsx的插件進行編譯。
5.處理其他文件：採用file-loader，按照原文件格式輸出。一般放在loader處理的最末尾。
三 常用的 plugins
1.html-webpack-plugin ： 可配置 template ，以某個html文件爲模板創建一個html文件，通過配置minify 屬性對html進行壓縮和去除註釋
2.mini-css-extract-plugin ： 將css 單獨打包成一個文件進行輸出
3.optimiza-css-asset-webpack-plugin : 將css文件進行壓縮
4...
四 webpack 常見的優化
開發環境
1.開發環境下： HMR - 熱模塊替換（hot module replace），更改一個模塊，只對該模塊進行重新打包，不會影響到其他模塊。css-loader內置了HMR功能，所以一般修改css文件，webpack-dev-server不會重啓。html 文件只有一個，不需要HMR功能。js 文件默認沒有HMR功能，需要在js文件插入代碼方式實現。
2.開發環境下配置： tooldep：('' | 'evel','cheap','inline' ，'hide','none'...)'source-map' ,用於創建source-map文件，支持打包後文件與源文件進行關聯 方便找出錯誤位置。
生產環境
1.緩存
給babel-loader 配置 cacheDirectory ：true。開啓babel-loader緩存，能加快第二次的構建速度。
runtime緩存： 打包文件名採用 [contenthash:10].[ext] 方式進行命名. (hash ,chunkhash , contenthash 的區別，爲什麼要用contenthash)
2.tree-shaking 樹搖 ： 去除無用代碼
開啓條件： mode：'production', 使用Es6模塊 。 注意，引入的css文件，沒有在代碼中使用，默認會被樹搖當作無用代碼清除 。需要在package.json文件中配置 sideEffects：[.css,.scss,*.less]
3.代碼分割
多入口分割
按需加載分割：懶加載，預加載方式
import(/*webpackChunkName:'test'*/'./test.js').then.catch // 懶加載
import(/*webpackChunkName:'test',webpackPrefetch:true*/'./test.js').then.catch // 預加載
optimization 配置 進行代碼分割： splitChunks， 將node_modules中代碼單獨打包成一個chunk
4.PWA模式 ： 漸進式網絡開發應用程序。讓網頁在斷網情況下依舊可以訪問。
5.多進程打包 ： thread-loader，一般多js文件很多時候對babel-loader可開啓多進程打包。（開啓多進程打包會有一定量的消耗不可亂用，可手動配置進程數量）
6.externals 配置哪些庫不需要打包，而是採用cdn的方式引入
7.dll技術，新建一個 dll的webpack配置，先將 node_modules中的文件進行打包。 後續構建打包只對修改文件進行，就會大大加快速度。
五 其他配置
resolve配置
簡寫路徑 alias{@：resolve（ __dirname,‘src’）}
省略後綴名 extension：[‘js’,’json’,’jsx’]
devserve 配置：
contentBase - 啓動代碼目錄build，wathchContentBase - 監視build，reload
compress - 壓縮，port，hot （HMR），
clientLOgLevel：none- 不要顯示啓動日誌
quiet：true,除了一些基恩啓動信息之外，不打印
proxy:代理 {‘/api’:{target:‘http:請求轉發’,pathRewrite:{‘^/api’:api}}}
resolveLoader：modules：[resolve(__dirname,‘../node_modules’)，resolve(__dirname, 'loaders')]告訴webpack解析模塊去哪個目錄找 ,有時知道它在哪一層時候，寫絕對定位，不然它會一層一層的找，可以優化構建速度（自定義loader模塊去哪裏找）
六 webpack的執行流程
-
初始化 Compiler：webpack(config) 得到 Compiler 對象
-
開始編譯：調用 Compiler 對象 run 方法開始執行編譯
-
確定入口：根據配置中的 entry 找出所有的入口文件。
-
編譯模塊：從入口文件出發，調用所有配置的 Loader 對模塊進行編譯，再找出該模塊依賴的模塊，遞歸直到所有模塊被加載進來
-
完成模塊編譯： 在經過第 4 步使用 Loader 編譯完所有模塊後，得到了每個模塊被編譯後的最終內容以及它們之間的依賴關係。
-
輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表。（注意：這步是可以修改輸出內容的最後機會）
-
輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統