web前端高階webpack - 初識webpack 的安裝執行及核心概念

一笑程式猴 發表於 2020-12-29

初識webpack

  • 本質上,webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle。這是官網給出的解釋
  • 通俗的講:webpack就是一個打包工具,通過webpack可以將js、css、sass、scss、jpg、png等等檔案分門別類打包生成一個js/css/jpg等檔案
    在這裡插入圖片描述

webpack作為前端構建構建的用途

  • 程式碼轉換
    • 可以將ts程式碼轉換為js程式碼
    • 將less、scss等程式碼轉換為css程式碼
  • 檔案優化:可以將js/css程式碼等進行合併壓縮,減少請求次數
  • 程式碼分割:把一個頁面中一些通用的程式碼分割出來
  • 模組合併:把幾個js中的程式碼合併為一個單獨的js
  • 自動重新整理:程式碼修改後瀏覽器自動重新整理頁面載入資料
  • 程式碼校驗
  • 自動釋出

webpack及webpack-cli安裝

  • 在安裝webpack前,首先要確保已經安裝了node環境。
  • webpack的安裝也很簡單 直接npm install webpack即可。webpack-cli同理。
npm install webpack webpack-cli

webpack 執行

  • 可以通過npm run [dev] 來執行webpack
  • run後面的dev是自己在package.json檔案中自己配置的,可以是任何值
{
"scripts":{
	"dev":"webpack",
	"build": "webpack --mode production"//通過--mode可以指定開發環境還是生產環境
	}
}

webpack 的四個核心概念

  • 入口(entry)

-入口起點(entry point)指示 webpack 應該使用哪個模組,來作為構建其內部依賴圖的開始。進入入口起點後,webpack 會找出有哪些模組和庫是入口起點(直接和間接)依賴的。

  • 每個依賴項隨即被處理,最後輸出到稱之為 bundles 的檔案中,我們將在下一章節詳細討論這個過程。
    可以通過在 webpack.config.js配置檔案中中配置 entry 屬性,來指定一個入口起點(或多個入口起點)。預設值為 ./src。
//簡單配置
module.exports = {
  entry: './src/main.js'
};
  • 出口(output)
  • output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles,以及如何命名這些檔案,預設值為 ./dist。基本上,整個應用程式結構,都會被編譯到你指定的輸出路徑的資料夾中。你可以通過在配置中指定一個 output 欄位,來配置這些處理過程
  • 在下面的示例中,我們通過 output.filename 和 output.path 屬性,來告訴 webpack bundle 的名稱,以及我們想要 bundle 生成(emit)到哪裡。
  • 下面程式碼中匯入的 path 模組是一個 Node.js 核心模組,用於操作檔案路徑。
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  }
};
  • loader
  • loader 讓 webpack 能夠去處理那些非 JavaScript 檔案(webpack 自身只理解 JavaScript)。loader 可以將所有型別的檔案(css/jpg等)轉換為 webpack 能夠處理的有效模組,然後你就可以利用 webpack 的打包能力,對它們進行處理。
  • 本質上,webpack loader 將所有型別的檔案,轉換為應用程式的依賴圖(和最終的 bundle)可以直接引用的模組。
  • 在webpack的配置中loader有兩個目標
    • test屬性,用於標識出應該被對應的loader進行轉換的某個或某些檔案
    • use屬性,表示進行轉換時,應該使用哪個loader

注意,loader 能夠 import 匯入任何型別的模組(例如 .css 檔案),這是 webpack 特有的功能,其他打包程式或任務執行器的可能並不支援。我們認為這種語言擴充套件是有很必要的,因為這可以使開發人員建立出更準確的依賴關係圖。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      { test: /\.scss$/, use: 'scss-loader' }
    ]
  }
};
  • 外掛(plugin)
  • loader 被用於轉換某些型別的模組,而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括,從打包優化和壓縮,一直到重新定義環境中的變數。外掛介面功能極其強大,可以用來處理各種各樣的任務。
  • 想要使用一個外掛,你只需要 require() 它,然後把它新增到 plugins 陣列中。多數外掛可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛,這時需要通過使用 new 操作符來建立它的一個例項。
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      { test: /\.scss$/, use: 'scss-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})//將打包壓縮好的js檔案自動引入到index.html中
  ]
};