webpack
核心屬性
entry 入口文件路徑，單入口chunk名為main京闰，多入口時(shí)名為自己定義的名字
-
output 輸出文件路徑考蕾，必須為絕對(duì)路徑，當(dāng)前是多入口時(shí)吐咳，filename的文件名要寫成變量
- path:path.join(__dirname,'xxx')
- filename:'xxx.js' / '[name].js'
- publicPath:'/'逻悠，靜態(tài)文件的讀取路徑
module 指定文件，使用loader
alias 配置路徑別名
plugin 功能擴(kuò)展插件
chunk 代碼片段
mode 優(yōu)化模式韭脊，development/production
-
devServer 開發(fā)服務(wù)配置
- contentBase:path.join(__dirname,'')
- port:xxxx
- host:'localhost'
-
compress:true/false(是否壓縮)
基本配置
-
loader
- style-loader,css-loader童谒，打包并解釋css文件
- file-loader，用于打包圖片
- url-loader沪羔，內(nèi)置file-loader饥伊，小于定值大小時(shí)，僅生成base64
- html-withimg-loader，html文件中加載圖片
-
plugin
clean-webpack-plugin撵渡，重新打包時(shí)刪除舊的文件
html-webpack-plugin融柬，打包html文件
mini-css-extract-plugin,單獨(dú)引入css文件，不再使用style-loader
optimize-css-assets-webpack-plugin,壓縮css樣式
terser-webpack-plugin,用來替換uglifyjs-webpack-plugin趋距，以壓縮js代碼
sourceMapDevToolPlugin粒氧，追蹤代碼錯(cuò)誤
