webpack初識（webpack是什么？webpack有哪些功能？）

webpack簡介

webpack是基於模塊化的打包（構建）工具，它把一切視為模塊（js、css、圖片）

它通過一個開發時態的入口模塊為起點，分析出所有的依賴關系，然后經過一系列的過程（語法轉換、資源壓縮、模塊合並），最終生成運行時態的文件。

 

webpack的作用

• 代碼轉換：將TypeScript編譯成Javascript，將SCSS編譯成CSS等。
• 文件優化：壓縮Javascript、CSS、HTML代碼，壓縮合並圖片等。
• 代碼分割：提取多個頁面的公共代碼，提取首屏不需要執行部分的代碼讓其異步加載。
• 模塊合並：在采用模塊化的項目里會有很多個模塊和文件，需要通過構建功能將模塊分類合並成一個文件。
• 自動刷新：監聽本地源代碼的變化，自動重新構建、刷新瀏覽器。
• 代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規范，以及單元測試是否通過。
• 自動發布：更新代碼后，自動構建出線上發布代碼並傳輸給發布系統。

 

webpack的安裝

webpack通過npm安裝，它提供了兩個包：

• webpack：核心包，包含了webpack構建過程中要用到的所有api
• webpack-cli：提供一個簡單的cli命令，它調用了webpack核心包的api，來完成構建過程

安裝方式：

• 全局安裝：可以全局使用webpack命令，但是無法為不同項目對應不同的webpack版本(npm install -g)
• 本地安裝：推薦，每個項目都使用自己的webpack版本進行構建(npm install -D)

webpack使用

全局的webpack：

webpack

本地的webpack：

npx webpack

默認情況下，webpack會以./src/index.js作為入口文件分析依賴關系，打包到./dist/main.js文件中

通過--mode選項可以控制webpack的打包結果的運行環境

 

區分環境

有些時候，我們需要針對生產環境和開發環境分別書寫webpack配置

為了更好的適應這種要求，webpack允許配置不僅可以是一個對象，還可以是一個函數

npx webpack --env.prod

// webpack.config.js
module.exports = env => {
    if(env && env.prod) {
      return {
        mode: 'production',
        devtool: 'none'
      }
    }else {
      return {
        mode: 'development',
        devtool: 'source-map'
      }
    }
}

這樣一來，我們就可以在命令中指定環境，在代碼中進行判斷，根據環境返回不同的配置結果。