目錄
前端爲什麼要進行打包和構建？
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
(場景、效果、原理)