webpack是開發工具，面試考點重點在配置和使用，原理理解不需要太深，
一、基本配置
1、拆分配置和merge
將公共配置跟dev和prod的配置拆分，然后通過webpack-merge對配置進行整合，
2、啟動本地服務
dev環境啟動devserver配置，
3、處理ES6
使用babel-loader，針對對應目錄的js進行代碼轉換，
4、處理樣式
使用postcss-loader、css-loader、style-loader等，這里有個考點是loader的執行順序是從后往前執行，
5、處理圖片
在dev環境直接使用file-loader進行圖片的直接參考，prod環境會使用url-loader對小圖片進行base64編碼，
6、模塊化
webpack天生支持模塊化，
二、高級配置
1、配置多入口
entry設定多入口檔案，在output輸出檔案使用[name]根據entry的key動態生成輸出檔案名
plugins要設定多個HtmlWebpackPlugin，根據多入口生成多個html檔案，同時要設定chunks，來引入相應入口檔案，如果不設定則會把全部入口檔案都引入 ，
2、每次打包清除dist原有檔案
在plugins使用new CleanWebpackPlugin()，會默認清空 output.path 指定的檔案夾內容，
3、抽離css檔案
mini-css-extract-plugin使用這個插件的loder來替換style-loader，
在plugins里面配置mini-css-extract-plugin的filename，用于設定存放抽離的css具體目錄和名字，
使用webpack的optimization的minimizer加入 terser-webpack-plugin 和 optimize-css-assets-webpack 插件來壓縮抽離的css，
4、抽離公共代碼
使用webpack的optimization的splitChunks
optimization:{ splitChunks:{ chunks: 'all', // 快取分組 cacheGroups:{ //第三方模塊 vendor:{ name:'vendor', // chunk 名稱 priority:1, // 權限最高，優先抽離，重要！！ test:/node_modules/, // 匹配目錄規則 minSize:0, // 大小限制 minChunks:1, // 最少復用過幾次 } //公共模塊 common:{ name:'common', // chunk 名稱 priority:0, // 優先級 minSize:0, // 公共模塊的大小限制 minChunks:2, // 公共模塊最少復用過幾次 } } } }
5、異步加載js
import語法webpack天生支持異步加載，
異步加載會產生單獨的chunk，
6、處理JSX
安裝配置 @babel/preset-react 即可，
7、處理VUE檔案
安裝配置 vue-loader 即可
三、優化構建速度
1、優化 babel-loader（可用于生產）
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'], // 開啟快取
include: path.resolve(__dirname, 'src'), // 明確范圍
// 排除范圍，include 和 exclude 兩者選一個即可
// exclude: path.resolve(__dirname, 'node_modules')
}
開啟快取后，es6沒有改的會使用快取不會重新編譯
設定使用范圍可以縮小編譯量
2、IgnorePlugin（可用于生產）
忽略正則匹配的 js
3、noParse（可用于生產）
不去決議正則匹配的庫的依賴
4、happyPack（可用于生產）
JS單執行緒，使用happyPack開啟多行程打包，提高構建速度，特別是多核CPU，
5、ParallelUglifyPlugin（只用在生產）
webpack內置Uglify工具壓縮JS，開啟多行程壓縮JS，原理和happyPack相同，
new ParallelUglifyPlugin({
// 傳遞給UglifyJS的引數，值不過開啟了多行程壓縮
uglifyJS:{
output:{
beautify:false, // 最緊湊的輸出
comments:false, // 洗掉所有注釋
},
compress:{
// 洗掉所有的 console 陳述句，可以兼容ie
drop_console: true,
// 內嵌定義了但是只用到一次的變數
collapse_vars: true,
// 提取出出現多次但是沒有定義成變數去參考的靜態值
reduce_vars: true,
}
}
})
關于開啟多行程要按需使用，
專案大，打包速度慢，開啟多行程提高速度
專案小，打包速度快，開啟多行程反而降低速度
6、自動重繪（不可用于生產）
{
watch:true, // 開啟監聽，默認 false
// 注意，開啟監聽之后，webpack-dev-server 會自動開啟重繪瀏覽器
// 監聽配置
watchOptions:{
ignored: /node_modules/, // 忽略內容
// 監聽到變化發生后等300ms再去執行動作，防止檔案更新太快導致重新編譯頻率太高
aggregateTimeout:300, // 默認為300ms
// 判斷檔案是否發生變化時通過不停的去詢問系統指定檔案有沒變化實作的
poll:1000, // 默認每隔1000ms詢問一次
}
}
以上配置一般開發不會配置到，因為開啟webpack-dev-server會自動帶上自動重繪的配置，以上配置是為了理解自動重繪有哪些內容，
7、熱更新（不可用于生產）
自動重繪：整個網頁全部重繪，速度較慢，狀態會丟失
熱更新：新代碼生效，網頁不重繪，狀態不丟失
熱更新使用插件：HotModuleReplacementPlugin
在entry入口中要新增兩行配置：
entry:{
index:[
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
path.join(srcPath,'index.js')
]
}
然后在plugin中使用HotModuleReplacementPlugin插件，
最后在devServer中增加一個屬性：hot:true，開啟熱更新，
配置熱更新后，需要增加需要熱更新模塊的邏輯代碼，如下
if(module.hot){
moudule.hot.accept(['./math'],()=>{
// 熱更新模塊里面的回呼函式
})
}
8、DllPlugin 元件（不可用于生產）
使用前提：
前端框架如vue、react體積大，構建慢，比較穩定，不常升級，
同一個版本只構建一次即可，不用每次都重新構建，
webpack已內置DllPlugin支持，
使用程序：
DllPlugin先打包出dll檔案
DllReferencePlugin再使用dll檔案
四、優化產出代碼
優化方向：體積更小，合理分包，不重復加載，速度更快，記憶體使用更少
1、小圖片Base64編碼
2、bundle加hash
3、懶加載
4、提取公共代碼
5、IngorePlugin
6、使用CDN加速：
在output設定publicPath，會修改所有js跟css檔案添加cdn前綴
在url-loader設定publicPath，可以修改圖片的cdn前綴
7、使用production
開啟production模式跟development相比的差異點：
（1）自動開啟代碼壓縮
（2）Vue React等會自動刪掉除錯代碼（如開發環境的warning）
（3）自動啟動Tree-Shaking，必須用ES6 Module 才能讓tree-shaking生效，commonjs就不行
ES6 Module 靜態引入，編譯時引入
Commonjs動態引入，執行時引入
只有靜態引入才能進行靜態分析，實作Tree-Shaking
8、Scope Hosting
開啟之后，會將多個參考檔案合并成一個函式，減少函式作用域，代碼體積更小，代碼可讀性更好
如何配置：
參考ModuleConcatenationPlugin插件，使用插件即可開啟，
針對npm中第三方模塊優先采用 jsnext:main 中指向的 ES6 模塊化語法的檔案
resolve:{
mainFields: ['jsnext:main','brower','main']
}
五、babel
基本配置：.babelrc檔案
plugins是寫如何翻譯語法的插件，presets是集合多個插件整合的一個包，
{
"presets":[
["@babel/preset-env"]
],
"plugins":[]
}
babel-polyfill：兼容低版本瀏覽器，重寫低版本沒有的新語法，
core-js和regenerator兩個庫可以滿足最大多數新語法的polyfill，babel-polyfill就是前兩個庫的集合，
babel 7.4之后已經棄用了babel-polyfill，而推薦直接使用core-js和regenerator，
直接使用的弊端是由于重寫全域方法會污染全域環境，
babel-runtime：
使用runtime配置，可以使polyfill重寫的方法不污染全域環境，相當于重命名方法，代碼也是自動替換成新名稱的方法，
面試真題：
1、前端代碼為什么要進行構建和打包？
代碼層面：
（1）體積更小（Tree-Shaking、壓縮、合并），加載更快
（2）編輯高級語言或語法（TS、ES6+、模塊化，scss）
（3）兼容性和錯誤檢查（Polyfill、postcss、eslint）
研發流程：
（1）統一、高效的開發環境
（2）統一的構建流程和產出標準
（3）集成公司構建規范（提測、上線等）
2、module chunk bundle 分別什么意思，有何區別？
module - 各個原始碼檔案，webpack 中一切皆模塊
chunk - 多模塊合并成的，如 entry import() splitChunk
bundle - 最終的輸出檔案
3、loader和plugin的區別？
loader模塊轉換器，如 less 轉 css，說出一些常用的loader
plugin擴展插件，如 HtmlWebpackPlugin，說出一些常用的plugin
4、babel和webpack的區別？
babel是JS新語法編譯工具，不關系模塊化
webpack是打包構建工具，是多個 loader plugin 的集合
5、如何產出一個 lib
output:{
// lib的檔案名
filename: 'lodash.js',
// 輸出 lib 到dist 目錄下
path: distPath,
// lib 的全域變數名
library: 'lodash'
}
6、webpack如何實作懶加載？
import()語法實作
結合 Vue React 異步組件，結合 Vue-router React-router 異步加載路由來簡要說下，
7、webpack常見性能優化？
將上面的三、四的優化內容根據實際效果講下
8、babel-runtime和babel-polyfill的區別？
babel-polyfill會污染全域
babel-runtime不會污染全域
產出第三方 lib 要用 babel-runtime
9、為何Proxy 不能被 polyfill？
Class 可以用 function 模擬， Promise 可以用 callback 來模擬
但是Proxy的功能用Object.defineProperty 無法模擬
放棄安逸，持續努力——成長
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454662.html
標籤：其他