webpack是開發工具，面試考點重點在配置和使用，原理理解不需要太深。
webpack 本質上是一個函數，它接受一個配置信息作為參數，執行后返回一個 compiler 對象，調用 compiler 對象中的 run 方法就會啟動編譯。run 方法接受一個回調，可以用來查看編譯過程中的錯誤信息或編譯信息。
Loader 本質上就是接收資源文件，並對其進行轉換，最終輸出轉換后的文件。
Plugin 本質上就是一種事件流的機制，到了固定的時間節點就廣播特定的事件，用戶可以在事件內執行特定的邏輯，類似於生命周期。
一、基本配置
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 無法模擬