webpack 學習筆記

Chapter 1

• webpack 默認配置⽂文件:webpack.config.js
• 能夠經過 webpack --config 指定配置⽂文件

• 經過 npm script 運⾏行行 webpack,package.json裏的script下配置。

---

Chapter 2

• entry:打包的入口文件
• output:如何將編譯後的文件輸出到磁盤
• 
• Loaders: 支持其它文件類型而且把它們轉化成有效的模塊，而且能夠添加到依賴圖中

• 

  • • babel-loader 解析ES6
  • style-loader,css-loader,less-loader 解析css
  • file-loader 解析圖片或字體
  • url-loader 解析圖片，可帶limit參數轉換成base64
• Plugins: 用於 bundle ⽂文件的優化，資源管理理和環境變量量注⼊入,做⽤用於整個構建過程.
• 
• Mode: 構建環境是:production、development 仍是 none
• 
• 文件監聽：webpack --watch.build編譯好的文件會自動更新。

• 熱更新：webpack-dev-server(WDS)

• 熱更新：第一次打開（1-2-A-B），更改文件熱更新（1-2-3-4）

• 文件指紋：

  • hash 字體和圖片
  • Chunkhash:js(和 webpack 打包的 chunk 有關，不不同的 entry 會⽣生成不不同的 chunkhash 值)
  • contenthash:css

• 代碼壓縮：

  • js:內置unglify-webpack-plugin
  • css:optimize-css-assets-webpack-plugin和cssnano.因爲是單獨生成css，須要刪除style-loader(這個是用來生成css插入header標籤的)
  • html:html-webpack-plugin

---

Chapter 3

• 自動清理構建目錄：使用clean-webpack-plugin
• 自動補齊CSS3前綴：PostCSS 插件 autoprefixer
• CSS3的px和rem轉換：使用 px2rem-loader，自動計算根元素font-size:lib-flexible

• html,js資源內聯：

  • 例如 ${require('raw-loader!babel-loader!../node_modules/lib-flexible')}
• css資源內聯：
• 
• 多頁面打包：
• 
• source map:構建完成時，是否能夠經過map調試源碼，而非打包後的代碼。配置devtool:'source-map'

• 分離公共資源：

  • 基礎庫分離：使用html-webpack- externals-plugin用cdn方式替換
  • 公共腳本分離：使用SplitChunksPlugin(webpack 4內置，替代CommonsChunkPlugin),也能夠分離基礎庫cdn
• tree shaking:ES6語法（import ...)靜態分析，沒有被用到的代碼，不打包。
• scope hoisting：使用ES6語法，減小webpack打包產生的閉包。
• JS懶加載：使用插件 npm install @babel/plugin-syntax-dynamic-import --save-dev
• ESLint：發現代碼錯誤，保證團隊風格
• 

• webpack打包庫和組件：

  • 支持 AMD/CJS/ESM 模塊引⼊
  • 
  • library: 指定庫的全局變量量
  • libraryTarget: 支持庫引入的⽅式
  • 
  • 
  • npm publish 打包上傳。
• ssr服務端渲染：服務端生成html模板,css，data數據，直接返回客戶端。減小請求次數，提高seo.
• 優化日誌：stats:errors-only + friendly-errors-webpack-plugin插件

• 錯誤日期的捕獲和中斷：

  • echo $? 查看錯誤碼
  • webpack4 和 3 寫法不同
  • 
• • *

Chapter 4

• 構建配置抽離成 npm 包

  • 
  • 經過 webpack-merge 組合配置
• 冒煙測試：測試打包後是否構建報錯，測試是否有html，css，js文件輸出。
• 單元測試：mocha + chai（斷言庫）
• 測試覆蓋率：istanbul
• 持續集成ci：Travis
• git commit 規範：規範git commit提交信息，自動生成change-log.
• 
• 

• 版本號規範：

  • X.Y.Z
  • alpha,beta,rc

---

Chapter 5

• package.json 中使用 stats
• 速度分析： speed-measure-webpack-plugin
• 體積分析： webpack-bundle-analyzer
• 使用高版本：node和webpack
• 多進程多線程：webpack4原生:thread-loader
• 並行壓縮： terser-webpack-plugin 開啓 parallel 參數
• 分包：分離基礎庫：html-webpack-externals- plugin
• 進一步分包：預編譯資源模塊： 使用 DLLPlugin 進行分包，DllReferencePlugin 對 manifest.json 引用

• 使用緩存構建：

  • babel-loader 開啓緩存
  • terser-webpack-plugin 開啓緩存
  • 使用 cache-loader 或者 hard-source-webpack-plugin
• 縮小構建目標：好比 babel-loader 不解析 node_modules
• 減小文件搜索範圍

• 圖片壓縮：imagemin
• tree shaking:去除沒有用到的js和css
• 動態polyfill: 識別 User Agent，下發不一樣的 Polyfill
•