Webpack-- 常見面試題

目錄

前端為什么要進行打包和構建？
module chunk bundle區別
loader和plugin的區別
babel和webpack的區別
webpack如何實現懶加載
如何產出一個lib
babel-polyfill babel-runtime區別
為什么proxy不能被polyfill
webpack優化構建速度
webpack優化產出代碼

前端為什么要進行打包和構建？

代碼層面：

• 體積更小（Tree-shaking、壓縮、合並），加載更快
• 編譯高級語言和語法（TS、ES6、模塊化、scss）
• 兼容性和錯誤檢查（polyfill,postcss,eslint）

研發流程層面：

• 統一、高效的開發環境
• 統一的構建流程和產出標准
• 集成公司構建規范（提測、上線）

module chunk bundle區別

module - 各個源碼文件，webpack中一切皆模塊

chunk - 多模塊合並成的

在 entry import() splitChunks 都可以定義chunk:

entry: {
  index: path.join(srcPath, 'index.js'),
  other: path.join(srcPath, 'other.js')
},
import('./***/djdj.js').then(res=>{
  console.log(res.data)
})
// splitChunks 代碼分割；HtmlWebpackPlugin引用 chunk

 

bundle -最終輸出文件

loader和plugin的區別

loader 模塊轉換器 （less->css）
plugin 是擴展插件，如HtmlWebpackPlugin

常見的loader和plugin有哪些？
Loader:

• babel-loader：把 ES6 轉換成 ES5
• css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性
• style-loader：把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS。
• file-loader (png|jpg|jpeg|gif 開發
• 'url-loader', 生產
• vue-loader

Plugin:

• IgnorePlugin 避免引入無用模塊
• HotModuleReplacementPlugin 熱更新
• define-plugin：定義環境變量
• commons-chunk-plugin：提取公共代碼
• uglifyjs-webpack-plugin：通過UglifyES壓縮ES6代碼

babel和webpack的區別

babel JS新語法編譯工具，只關心語法，不關心模塊化
webpack -打包構建工具，是多個Loader plugin的集合

webpack如何實現懶加載

import()

• 結合 vue 異步組件 $nexitick
• 結合vue-router異步加載路由 import

如何產出一個lib

output: {
  // lib的文件名
  filename: 'lodash.js',
  // 輸出的lib都放到 dist 目錄下
  path: distPath,
  // 存放lib的全局變量名稱
  library: 'lodash',
},

 

babel-polyfill babel-runtime 區別

babel-polyfill 會污染全局
babel-runtime 不會污染全局，產出第三方lib時要用babel-runtime

為什么 Proxy 不能被 Polyfill

如 Class 可以用 function 模擬
如 Promise 可以用 callback 模擬
但是 Proxy 功能用 Object.defineProperty 無法模擬

webpack優化構建速度

生產環境：
babel-loader
IgnorePlugin
noParse
happyPack
ParallelUglifyPlugin

不能用於生產環境：
自動刷新
熱更新
DllPlugin

webpack優化產出代碼

小圖片base64編碼
bundle加hash
懶加載
提取公共代碼
使用cdn加速
IgnorePlugin
使用production
Scope Hosting
(場景、效果、原理)