webpack 學習

• 2021 年 5 月 6 日
• 筆記
• 前端工程

Webpack 英文文檔

• entry入口
• output出口
• loader
  • webpack自身只能理解JavaScript
  • loader可以將所有類型的文件轉換為webpack能夠處理的有效模組
  • 轉換後進而可以構建依賴圖
• plugin
  • 執行更廣的任務
  • 打包、優化、壓縮…重新定義環境中的變數
  • require->添加到plugin數組->options/new(不同目的多次使用同一個插件)
• 模式：model
  • 添加 mode: ‘development’/’production’
• 拓展部分
  • webpack提供命令行介面（cli）
  • webpack各種命令
    • –help
      • 列出命令行所有配置命令
      • webpack –help / webpack -h
    • –config
      • 為webpack指定一個其它的配置文件（默認為 webpack.config.js ）
      • webpack –config anotherConfigFile.js
    • –progress
      • 在命令行控制台列印顯示當前的打包進度
      • webpack –progress
    • –watch
      • 實時監測依賴表裡面的文件的變化，會迅速更新打包後的文件，否則通過快取獲取
      • webpack –watch / webpack -w
    • –colors
      • 開啟/關閉控制台的顏色
      • webpack –colors(webpack5.3 好像報錯了) / webpack –color
    • –profile
      • 記錄過程中編譯的性能
      • webpack –profile
  • webpack-dev-server
    • 安裝：npm i webpack-dev-server -g
    • 運行： webpack-dev-server(相當於 webpack )
    • 它將在 localhost:8080 啟動一個 express 靜態資源 web 伺服器
    • 以監聽模式自動運行 webpack
    • 在瀏覽器打開 //localhost:8080/ 或 //localhost:8080/webpack-dev-server/
    • 可以瀏覽項目中的頁面和編譯後的資源輸出
    • 通過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面
  • 通過package.json將常用命令製成腳本
    • package.json中的script欄位指定運行腳本命令的npm 縮寫
    • “scripts”: {<br /> “w”: “webpack –progress –colors –watch”,<br /> “p”: “webpack -p”,<br /> “dev”:”webpack-dev-server”<br /> }<br />
      • 運行npm run w時，相當於運行webpack –progress –colors –watch，表示運行監視模式，使用彩色字元，並顯示出打包的百分比過程
      • 運行npm run p時，相當於運行webpack -p，表示壓縮模組文件
      • 運行npm run dev時，相當於運行webpack-dev-server，表示運行本地伺服器