前端構(gòu)建工具對比
作用：
- 把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行 JS CSS HTML 代碼；
- 代碼轉(zhuǎn)換谒拴、文件優(yōu)化、代碼分割英上、模塊合并、自動刷新惭聂、自動發(fā)布、代碼校驗
對比：
Grunt辜纲、Gulp：集成度不高，沒法開箱即用
Fis3：官方團隊不再維護耕腾；也不支持最新的node
Rollup：生態(tài)鏈、功能都不夠完善扫俺；不支持 Code Spliting
Webpack：采用模塊化開發(fā)的項目；社區(qū)活躍狼纬、配置靈活、插件化擴展疗琉、官方更新迭代快
webpack4.0 基礎(chǔ)
- 核心：entry、output涛癌、mode、loaders拳话、plugins
- 解析圖片种吸、字體弃衍；解析Css坚俗、Less、Sass
- 文件指紋策略：hash猖败、contenthash、chunkhash
- 代碼壓縮
核心
entry: 打包的入口艺糜。單入口是一個字符串；多入口是一個對象
output：打包的輸出破停。單入口/多入口配置：通過占位符確保文件名稱的唯一
mode：用來指定當前的構(gòu)建環(huán)境是：production尉剩、development真慢、none理茎，默認是production管嬉。設(shè)置 mode 可以根據(jù)不同環(huán)境园爷，來加載 webpack 內(nèi)置的函數(shù)
loaders：webpack 只支持 JS 和 JSON 文件類型式撼，對于不支持的文件類型需要通過 Loaders 轉(zhuǎn)化成有效的模塊；
loaders 本身是一個函數(shù)著隆，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果
常用的 Loaders：babel-loader美浦、css-loader、less-loader浦辨、ts-loader、file-loader流酬、url-loader、raw-loader旦装、thread-loader
plugins：用于 bundle 文件的優(yōu)化、資源管理和環(huán)境變量注入阴绢；作用于整個構(gòu)建過程艰躺；loaders 無法做的事情可以通過 plugins 完成
常見的Plugins：CommonsChunkPlugin呻袭、CleanWebpackPlugin腺兴、ExtractTextWebpackPlugin、CopyWebpackPlugin含长、HtmlWebpackPlugin、UglifyjsWebpackPlugin纷纫、ZipWebpackPlugin
解析css、圖片辱魁、字體
style-loader 將樣式通過<style>標簽插入到 head 中
css-loader 用于加載 .css 文件，并轉(zhuǎn)換成 commonjs 對象
file-loader 用于解析圖片染簇、字體
url-loader 也可以處理圖片和字體，可以設(shè)置較小資源自動轉(zhuǎn) base64
文件指紋策略
概念：打包后輸出的文件名的后綴
作用：進行版本管理
常見的文件指紋有三種：
- hash：和整個項目的構(gòu)建相關(guān)砾赔，只要項目文件有修改青灼，整個項目的 hash 值就會改變
- Chunkhash：和 webpack 打包的 chunk 有關(guān)暴心，不同的 entry 就會生成不同的 chunkhash 值
-
Contenthash：根據(jù)文件內(nèi)容來定義 hash杂拨，文件內(nèi)容不變，則 contenthash 不變
使用場景：JS- chunkhash 弹沽、 CSS-contenthash 、 圖片 字體- hash
image.png
代碼壓縮
JS 文件壓縮：webpack 4 默認內(nèi)置了 uglifyjs-webpack-plugin
css 文件壓縮：optimize-css-assets-webpack-plugin击胜，同時使用 cssnano 預(yù)處理器
html 壓縮：html-webpack-plugin役纹，設(shè)置壓縮參數(shù) minify
minify 詳情配置：https://github.com/kangax/html-minifier#options-quick-reference
下篇，我們記錄下webpack4.0 進階
- px 自動轉(zhuǎn)rem
- Tree Shaking 的使用和原理分析
- Scope Hositing 使用和原理分析
- 優(yōu)化構(gòu)建命令行的顯示日志
