webpack（2）webpack核心概念

Silent丿丶黑羽發表於2021-07-09
Web

前言

  本質上，webpack 是一個用於現代 JavaScript 應用程式的 靜態模組打包工具。當 webpack 處理應用程式時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖對應對映到專案所需的每個模組，並生成一個或多個 bundle。接下來我們就會使用webpack來進行打包
 

webpack的概念

在開始前我們需要先理解一些核心概念：

  • 入口(entry)
  • 輸出(output)
  • loader
  • 外掛(plugin)
  • 模式(mode)
  • 瀏覽器相容性(browser compatibility)
  • 環境(environment)
     

入口(entry)

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

預設值是 ./src/index.js，但你可以通過在 webpack.config.js 檔案中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：

module.exports = {
  entry: './path/to/my/entry/file.js',
};

 

單個入口（簡寫）語法

entry 屬性的單個入口語法，參考下面的簡寫：

// webpack.config.js
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

 

我們也可以將一個檔案路徑陣列傳遞給 entry 屬性，這將建立一個所謂的 "multi-main entry"。在你想要一次注入多個依賴檔案，並且將它們的依賴關係繪製在一個 "chunk" 中時，這種方式就很有用。

// webpack.config.js
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

總結：當你希望通過一個入口為應用程式或工具快速設定 webpack 配置時，單一入口的語法方式是不錯的選擇。然而，使用這種語法方式來擴充套件或調整配置的靈活性不大。
 

物件語法

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

物件語法會比較繁瑣。然而，這是應用程式中定義入口的最可擴充套件的方式。

物件可以使用如下屬性：

  • dependOn: 當前入口所依賴的入口。它們必須在該入口被載入前被載入。
  • filename: 指定要輸出的檔名稱。
  • import: 啟動時需載入的模組。
  • library: 指定 library 選項，為當前 entry 構建一個 library。
  • runtime: 執行時 chunk 的名字。如果設定了，就會建立一個以這個名字命名的執行時 chunk，否則將使用現有的入口作為執行時。
  • publicPath: 當該入口的輸出檔案在瀏覽器中被引用時，為它們指定一個公共 URL 地址。
// webpack.config.js
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

 

輸出(output)

可以通過配置 output 選項，告知 webpack 如何向硬碟寫入編譯檔案。注意，即使可以存在多個 entry 起點，但只能指定一個 output 配置。
 

用法

在 webpack 配置中，output 屬性的最低要求是，將它的值設定為一個物件，然後為將輸出檔案的檔名配置為一個 output.filename：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

此配置將一個單獨的 bundle.js 檔案輸出到 dist 目錄中。
 

多個入口起點

如果配置中建立出多於一個 "chunk"（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的外掛），則應該使用佔位符(substitutions)來確保每個檔案具有唯一的名稱。

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// 寫入到硬碟：./dist/app.js, ./dist/search.js

 

loader

什麼是loader?

  • loader是webpack中非常核心的一個概念
  • webpack用來做什麼？
    • 在我們之前的例項中，我們主要是用webpack來處理js程式碼，並且webpack會自動處理js中的依賴
    • 但是，在開發中我們不僅僅有js程式碼要處理，我們也需要載入css、圖片，也包括一些高階的將es6轉成es5的程式碼，將Ts轉成es5的程式碼，將scss、less轉成css程式碼等等
    • 對於webpack本身的能力來說，對於這些轉化是不支援的
    • 但是我們給webpack擴充套件對應的loader即可
  • loader的使用過程
    • 步驟一：通過npm安裝對應使用的loader
    • 步驟二：在webpack.config.js中的modules關鍵字進行配置
  • 大部分loader我們都可以在官網中找到，並學習對應的用法

相關文章