webpack4/rollup/parcel
為什么要構建工具除破？
轉化es6語法
轉化jsx
Css前綴補全/預處理器
壓縮混淆
圖片壓縮
安裝 nvm
nvm(Node.js Version Manager)也就是 Node.js 的包管理器蝉稳，可以通過它方便安裝和切換不同的Node.js版本竖哩。
./node_modules/.bin/webpack -v 查看羨慕中webpack的版本
通過npm run build運行構建，原理：
模塊局部安裝會在node_mudules/.bin目錄創(chuàng)建軟鏈接
核心概念之entry
單入口：entry是一個字符串
多入口：entry是一個對象
核心概念之output
output用來告訴webpack如何將編譯后的文件輸出到磁盤。
指定filename——通過占位符確保文件名稱的唯一,path就可以了。
核心概念之loaders
webpack開箱即用只支持js和json兩種文件類型，通過loaders去支持其他文件類型并且把他們轉化成有效的模塊庐镐，并可以添加到依賴圖中恩商。
Loaders本身是一個函數，接受源文件作為參數必逆，返回轉換的結果怠堪。
注意：默認情況下webpack會開啟一個進程進行打包。thread-laoder用于多進程打包js和css名眉。
核心概念之plugins
插件用于打包輸出文件的優(yōu)化粟矿，資源管理和環(huán)境變量注入。
作用于整個構建過程损拢，也就是構建開始到構建結束都可以使用plugins
使用：放到plugins數組里
核心概念之mode
Mode用來指定當前的構建環(huán)境是production , development , none
設置mode 可以使用wenpack內置的函數陌粹，默認值為production
解析es6和react jsx
解析es6——babel-loader
babel的配置文件是：.babelrc
資源解析：增加es6的babel preset配置
1.plugins ： 一個plugins對應一個功能
2.preset ：是一系列babel plugins的集合
解析css
Css-loader用于加載.css文件，并且轉換成common.js對象
Style-loader將樣式通過<style>標簽插入到head中
解析圖片
File-loader 用于處理文件/字體
Url-loader 用于處理文件/字體福压，也可以設置較小資源自動base64掏秩，增加一個limit參數
Options:{
Limit:10240 //代表10240字節(jié)，就是10K
}
webpack中文件的監(jiān)聽
文件監(jiān)聽是在發(fā)現源碼發(fā)生變化時荆姆，自動重新構建出新的輸出文件蒙幻。
Webpack開啟監(jiān)聽模式，有兩種方式：
1.啟動webpack命令時胆筒，帶上- -watch參數
使用:npm run watch 缺陷：每次都需要手動刷新瀏覽器
2.在配置webpack.config.js中設置watch:true
文件監(jiān)聽的原理分析：
輪詢判斷文件的最后編輯時間時候變化邮破，
某個文件發(fā)生了變化，并不會立刻告訴監(jiān)聽者仆救，而是先緩存起來抒和，等aggregateTimeout
Module.export = {
//默認fasle，也就是不開啟
watch：true,
//只有開啟監(jiān)聽模式彤蔽，watchoptions才有意義
watchOptions: {
//默認為空构诚，不監(jiān)聽的文件或者文件夾，支持正則
ignored: /node_modules/,
//監(jiān)聽到變化發(fā)生后铆惑，等300ms再去執(zhí)行范嘱，默認300ms
aggregateTimeout:300,
//判斷文件是否發(fā)生變化是通過不停詢問文件系統(tǒng)指定文件有沒有變化實現的，默認每秒問1000次
poll：1000
}
}
熱更新：webpack-dev-server
WDS不刷新瀏覽器
WDS不輸出文件员魏，而是放在內存中丑蛤，而不是像watch一樣，放在本地磁盤中撕阎，它沒有I/O
使用HotModuleReplacementPlugin插件
dev: webpack-dev-srever —open
plugin: [
new webpack.HotModuleReplacementPlugin() //可以不加受裹，也會自動配置
],
devServer: {
contentBase:’/dist’,
hot:true
}
熱更新：webpack-dev-middleware
需要在用express或者koa創(chuàng)建一個node server
WDM將webpack輸出的文件傳輸給服務器
適用于靈活的定制場景
熱更新原理分析：
webpack Compile：將js 編譯成Bundle
HMR server：將熱更新文件輸出給HMR Rumtime
Bundle server:提供文件在瀏覽器的訪問
HMR Rumtime：會被注入到瀏覽器，更新文件的變化
Bundle.js：構建輸出的文件
HMR Server 是服務端，用來將變化的 js 模塊通過 websocket 的消息通知給瀏覽器端棉饶。
HMR Runtime是瀏覽器端厦章，用于接受 HMR Server 傳遞的模塊數據，瀏覽器端可以看到 .hot-update.json 的文件過來照藻。
webpack 構建出來的 bundle.js 本身是不具備熱更新的能力的袜啃，HotModuleReplacementPlugin 的作用就是將 HMR runtime 注入到 bundle.js，使得bundle.js可以和HMR server建立websocket的通信連接
文件指紋策略：chunkhash幸缕，contenthash , hash
文件指紋：打包后輸出文件名的后綴群发，通常做一些版本的管理
文件指紋的生成 :
Hash: 和這個項目的構建有關，只要項目文件有修改发乔，整個項目構建的hash值就會更改
chunkhash ： 和webpack打包的chunk有關熟妓，不用的entry會生成不同的chunkhash值
contenthash ： 根據文件內容來定義hash,文件內容不變，則contenthash不變
js文件指紋設置：設置output的filename,使用filename:’[name][chunkhash:8].js’
Css文件指紋設置：設置minicssExtractPlugin的filename栏尚，使用[contenthash]
Plugin:[
new minicssExtractPlugin({
filename:’[name][contenthash:8].css’
})
]
圖片文件指紋設置：設置file-loader的name起愈，使用[hash]
Options:{
name:’img/[name][hash:8].[ext]’
}
占位符名稱 含義
[ext] 資源后綴名
[name] 文件名稱
[path] 文件的相對路徑
[floder] 文件的所在文件夾
[contenthash] 文件的內容hash，默認是md5生成
[hash] 文件的內容hash译仗，默認是md5生成
[emoj] 一個隨機的指定文件內容的emoj
代碼壓縮
Html壓縮 修改html-webpack-plugin,設置壓縮參數（一個頁面對應一個html-webpack-plugin）
Css壓縮 使用optimize-css-assets-webpack-plugin,同時使用cssnano
js壓縮 webpack4中內置了uglifyjs-webpack-plugin
自動清理構建目錄產物
1.通過npm scripts清理構建目錄
rm -rf ./dist && wegpack
rimraf ./dist && webpack
2.為了避免構建前每次都需要手動刪除dist
使用clean-webpack-plugin 默認會刪除output指定的輸出目錄
postcss插件autoprefixer自動補齊css3前綴
css媒體查詢實現響應式布局
缺陷：需要寫多套適配樣式代碼
w3c對rem的定義：font-size of the root element , rem為相對單位告材。
lib-flexible 頁面渲染時計算根元素的font-size值，可以使用手淘的lib-flexible庫
移動端css px自動轉換成rem 使用postcss-plugin-px2rem
資源內聯的意義
1.代碼層面：
頁面框架的初始化腳本（比如頁面加載時候rem的計算）
上報相關打點（css古劲，js加載完成斥赋，初始化都需要內聯到代碼中）
css內聯避免頁面閃動（首屏或者是頁面的css內聯到html中，這樣子加載的時候避免頁面閃動）
2.請求層面：減少http網絡請求數
小圖片或者字體內聯（url-loader）
html和js內聯
Raw-loader內聯html
<script>{require(‘raw-loader!babel-laoder!../node_modules/lib-flexible/lib-flexible.js’)}</script>
css內聯
1.借助style-loader
2.html-inline-css-webpack-plugin
多頁面通用打包方案
多頁面應用（MPA）
每一次頁面跳轉的時候产艾，后臺服務器都會給返回一個新的html文檔
這種類型的網站也就是多頁網站疤剑，也叫做多頁應用
之前我們需要一個entry,一個html-webpack-plugin
現在：動態(tài)的獲取entry和設置html-webpack-plugin的數量
利用glob庫（glob原理：類似linux下文件通配，匹配的概念）
glob.sync把文件以同步的方式查找出來
entry:glob.sync(path.join（__dirname,’./src/*/index.js’）)
source map
作用：通過source map定位到源碼
開發(fā)環(huán)境開啟闷堡，線上環(huán)境關閉
線上排查問題的時候可以將sourcemap上傳到錯誤監(jiān)控系統(tǒng)
source map 關鍵字
eval：使用Eval包裹模塊代碼
source map ：產生.map文件
cheap：不包含列信息
Inline : 將.map作為dataurl嵌入隘膘，不單獨生成.map文件
module : 包含loader的sourcemap
提取頁面公共資源
1.基礎庫分離
思路：將react,react-dom基礎包通過cdn引入，不打入bundle中
方法：使用html-webpack-externals-plugin
2.利用splitChunksPlugin進行公共腳本分離
webpack4內置的杠览，替代commonsChunkPlugin插件
chunks參數說明：
async異步引入的庫進行分離（默認）
Initial同步引入的庫進行分離
all所有引入的庫進行分離 （推薦）
3.利用splitChunksPlugin進行分離基礎包
test：匹配出需要分離的包
tree shaking（搖樹優(yōu)化）
概念：1個模塊可能有多個方法弯菊，只要其中的某個方法使用到了，則整個文件都會被打到bundle里面去踱阿，tree shaking就是把用到的方法打入bundle管钳，沒用到的放大會在uglify階段被擦除掉。
使用：webpack4默認支持软舌，在.babelrc里設置modules:false即可
production mode的情況下默認開啟
要求：必須是es6語法才漆，cjs的方式不支持
Tree-shaking原理：
利用es6模塊的特點：
只能作為模塊頂層的語句出現
Import的模塊名只能是字符串常量
Import binding是immutable的
代碼擦除：uglify階段刪除無用的代碼
現象：構建后的代碼存在大量的閉包代碼
會導致的問題：
1.大量函數閉包包裹代碼，導致體積增大（模塊越多越明顯）
2.運行代碼時創(chuàng)建的函數作用域變多佛点，內存開銷變大
模塊轉換分析：
被webpack轉換后的模塊會帶上一層包裹
import會被轉換成__webpack_require
進一步分析webpack的模塊機制
打包出來的是一個llFE
modules是一個數組醇滥，每一項是一個模塊初始化函數
__wbepack_require用來加載模塊黎比，返回modules.exports
通過WEBPACK_REQUIRE_METHOD(0)啟動程序
Scope hoisting使用和原理
原理：將所有模塊的代碼按照引用順序放在一個函數作用域里，然后適當的重命名一些變量以防止變量名沖突
對比：通過Scope hoisting可以減少函數聲明代碼和內存開銷
使用：webpack mode為production默認開啟
注意：必須是es6語法鸳玩，cjs不支持
代碼分割
懶加載js腳本的方式
1.common.js:require
2.es6:動態(tài)import(目前原生不支持阅虫，需要babel轉換)
安裝@babel/plugin-syntax-dynaic-import
在.babelrc文件中：
“plugins”:[‘@babel/plugin-syntax-dynaic-import’]
webpack中使用esLint
esLint如何執(zhí)行落地？
1.和CI/CD系統(tǒng)集成
2.和webpack集成 eslint-config-airbnb
使用eslint-loader,構建時檢查JS規(guī)范
webpack中怎么打包一個組件和一個庫
實現一個大整數加法庫的打包不跟？支持ES module, CJS, AMD
未壓縮版：large-number.js
壓縮版： large-number.min.js
webpack中如何進行SSR?
渲染：html+css+js+data 渲染后的html
服務端：所有模塊等資源都存儲在服務器颓帝，內網機器拉取數據更快，一個html返回所有數據躬拢。（1個請求）
服務端渲染（SSR）的核心就是減少請求躲履。
減少白屏時間见间，對于SEO友好
優(yōu)化構建時命令行的顯示日志
使用friendly-errors-webpack-plugin
success:構建成功的日志提示
Warning:構建警告的日志提示
Error:構建報錯的日志提示
stats設置成errors-only
Plugins:[
new FriendlyErrorsWebpackPlugin()
],
stats:’errors-only’
構建異常和中斷處理
echo $聊闯？ 獲取錯誤碼。不為0的話就是失敗的米诉。
構建配置包設計
A.通過多個配置文件管理不同環(huán)境的構建菱蔬，webpack —config參數控制
B.將構建配置設計成一個庫，比如: hjs-webpack史侣、Neutrino拴泌、webpack-blocks
C.抽成一個工具進行管理，比如：create-react-app, kit, nwb
D.將所有的配置放在一個文件惊橱，通過—env參數控制分支選擇
構建包功能模塊設計和目錄結構
