webpack常用loaders和plugins
一、常用loaders
webpack開箱即用只支持js和json兩種文件類型，通過loaders去支持其他文件類型，并轉(zhuǎn)為有效的模塊，加入依賴圖中。
loaders，本身是個函數(shù)，接受源文件參數(shù)，返回轉(zhuǎn)換結(jié)果。
loaders，本身是個函數(shù)，接受源文件參數(shù)，返回轉(zhuǎn)換結(jié)果。
css-loader，支持css文件的加載解析
raw-loader，文件以字符串形式導(dǎo)入
thread-loader，支持多進(jìn)程打包js、css
file-loader，進(jìn)行圖片字體富媒體等的打包
二、常用plugins
plugins處理loaders無法完成的功能。
CommonsChunkPlugin，將chunks相同的模塊代碼提取成公共js
CleanWebpackPlugin，清理構(gòu)建目錄
ExtractTextWebpackPlugin，將CSS從 bunlde 文件里提取成一個獨立的CSS文件
CopyWebpackPlugin，將文件或者文件夾拷貝到構(gòu)建的輸出目錄
HtmlWebpackPlugin，創(chuàng)建html文件去承載輸出的bundle
UglifyjsWebpackPlugin，壓縮 JS
ZipWebpackPlugin，將打包出的資源生成一個zip包
三、內(nèi)置
webpack4新出的mode，當(dāng)前構(gòu)建環(huán)境，可以為production，development，none。設(shè)置 process.env. NODE_ENV的值為 development. 開啟
NamedChunksPlugin 和 NamedModulesPlugin. 可在hmr階段，控制臺打印哪兒些模塊使用了熱更新，以及路徑信息。
設(shè)置 process.env. NODE_ENV的值為 production. 開啟
FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,
OccurrenceOrderPlugin, SideEffectsFlagPlugin和
Terserplugin.
process.env. NODE_ENV的值為none
不開啟任何優(yōu)化選項
長按掃碼關(guān)注公眾號看往期精彩