摘要：Webpack是一種前端資源構建工具，一個靜態模塊打包器。
1. 摘要
Webpack是一種前端資源構建工具，一個靜態模塊打包器。在Webpack看來，前端的全部資源文件(js/json/css/img/less/…)都會做爲模塊處理，當Webpack處理應用程序時，它將根據模塊的依賴關係進行靜態分析，打包生成對應的靜態資源。Webpack打包流程圖如圖1-1所示。css
圖1-1 Webpack打包流程圖html
2. Webpack五個核心概念
2.1 Entry前端
入口(Entry)指示Webpack以哪一個文件做爲入口起點分析構建內部依賴圖並進行打包。node
2.2 Outputwebpack
輸出(Output)指示Webpack打包後的資源bundles輸出到哪裏去，以及如何命名。web
2.3 Loaderjson
Loader讓Webpack可以去處理那些非JavaScript語言的文件，Webpack自己只能理解JavaScript。瀏覽器
2.4 Plugins性能優化
插件(Plugins)能夠用於執行範圍更廣的任務，插件的範圍包括從打包和壓縮，一直到從新定義環境中的變量等。服務器
2.5 Mode
模式(Mode)指示Webpack使用相應模式的配置。分爲development和production兩種模式，下面分別進行簡述。
- development: 開發模式，能讓代碼本地運行的環境，會將process.env.NODE_ENV的值設爲development，同時啓用NamedChunksPlugin和NamedModulesPlugin插件；
- production: 生產模式，能讓代碼優化運行的環境，會將process.env.NODE_ENV的值設爲production，同時啓用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。
3. Wbepack配置
3.1 webpack.config.js文件
webpack.config.js是webpack的配置文件，用來指示webpack工做，運行webpack指令時，會加載裏面的配置，全部構建工具都是基於nodejs平臺運行的，默認採用commonjs模塊化。webpack.config.js基礎配置如圖3-1所示。
圖3-1 webpack.config.js基礎配置
3.2 devServer配置
開發服務器(devServer)用來實現自動化(自動編譯、自動打開瀏覽器、自動刷新瀏覽器)，只會在內存中編譯打包，不會有任何文件輸出，本地安裝webpack-dev-server後，經過npx webpack-dev-server命令啓動devServer，核心代碼如圖3-2所示。
圖3-2 devServer配置核心代碼
3.3 打包html/樣式/圖片/其它資源
打包不一樣的資源會使用不一樣的loader和插件，打包html/樣式/圖片/其它資源的流程以下所述。
3.3.1 打包html資源
1.下載html-webpack-plugin插件；
2.引入html-webpack-plugin插件；
3.使用html-webpack-plugin插件，並進行相應配置。
3.3.2 打包樣式資源
不一樣的樣式文件須要配置不一樣的loader
1.下載loader；
2.配置loader，css樣式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的做用是將css文件變成commonjs模塊加載到js文件中，style-loader的做用是建立style標籤，將js中的樣式資源插入進去，添加到head中生效。
3.3.3 打包圖片資源
1.下載url-loader，file-loader
2.配置loader
3.3.4 打包其它資源
1.下載file-loader
2. 配置loader，配置該loader做用於不爲html/css/less/js的其餘文件
3.4 提取css成單獨文件/css兼容性處理/壓縮css
3.4.1 提取css成單獨文件
樣式文件打包後會默認和js文件一塊兒輸出，能夠經過插件將打包後的css文件單獨輸出，流程以下所述。
1.下載mini-css-extract-plugin插件
2.引用該插件
3.配置
3.4.2 css兼容性處理
1.下載postcss-loader和postcss-preset-env
2.在package.json中browsetslist屬性中分別對開發環境和生產環境進行兼容性配置，設置支持樣式的瀏覽器版本
3.經過postcss找到package.json中browserslist裏面的配置，經過配置加載指定的css兼容性樣式。
3.4.3 壓縮css
1.下載optimize-css-assets-webpack-plugin插件
2.引用該插件
3.使用該插件
3.5 js語法檢查eslint/js兼容性處理/js壓縮
3.5.1 js語法檢查eslint
1.下載eslint-loader和eslint
2.在package.json中的eslintConfig中進行配置
3.配置eslint-loader，其中只需檢測js文件並要排除第三方庫，只檢測本身寫的源代碼，同時可在options配置中設置fix:true，自動修復eslint的錯誤。
3.5.2 js兼容性處理
1.下載babel-loader、@babel/core、@babel/preset-env，經過@babel/preset-env作基本的js兼容性處理，而後經過corejs作前面沒法實現的兼容性處理，並實現按需加載
2. 配置loader
js兼容性處理核心代碼如圖3-3所示
圖3-3 js兼容性處理核心代碼
3.5.3 js壓縮
mode設置爲production生產環境時會自動壓縮js代碼。
4. webpack性能優化
能夠從開發環境和生產環境分別對webpack進行性能優化。其中開發環境主要考慮從打包構建速度和代碼調試兩個方面進行優化，生產環境主要考慮從打包構建速度和代碼運行性能這兩個方面進行優化。下面簡單介紹下開發環境上經過HMR提高構建速度。
4.1 HMR
HMR(熱模塊替換)，做用是一個模塊發生變化後，只會更新打包這一個模塊而不是全部模塊，經過在devServer中設置hot:true屬性啓動HMR功能。
其中對於樣式文件，可使用HMR功能，由於style-loader內部實現了；
對於js文件，默認不能使用HMR功能，解決方法：修改入口文件js代碼，添加支持HMR功能的代碼，另外HMR只能處理非入口js文件的其餘文件，對入口文件並不能生效，由於一旦入口文件更新，入口文件引入的其餘文件必定會被從新加載；
對於html文件，默認不能使用HMR功能，同時會致使html文件不能熱更新，解決方法：修改entry入口文件，將html文件引入，只能解決html文件不能熱更新的問題。
js文件支持HMR功能的核心代碼如圖4-1所示。
圖4-1 js文件支持HMR功能核心代碼
4.2 HMR效果
在入口index.js文件中引入print.js文件，運行npx webpack-devserver後，頁面如圖4-2所示。
4-2 初始頁面
修改print.js文件後，只會從新加載print.js文件，而不會從新加載index.js文件，HMR效果如圖4-3所示。
4-3 HMR效果圖