模式

提供 mode 配置選項，告知 webpack 使用相應模式的內建優化

1. 在配置中設定選項

   module.exports = {
     mode: 'production'
   };
   

2. 從cli引數中傳遞

   webpack --mode=production
   

loader

一個Web工程通常會包含HTML、JS、CSS、模板、圖片、字型等多種型別的靜態資源，並且這些資源之間都存在著某種聯絡。比如在CSS中可能會引用圖片和字型。

對於Webpack來說，所有這些靜態資源都是模組，我們可以像載入一個JS檔案一樣去載入它們
。loader本質上都是一個函式：output=loader(input)

應用

1. 安裝

npm install --save-dev css-loader

2. 配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    ]
  }
};

• test可接收一個正則表示式或者一個元素為正則表示式的陣列，只有正則匹配上的模組才會使用這條規則。在本例中以/\.css$/來匹配所有以.css結尾的檔案。
• use可接收一個數組，陣列包含該規則所使用的loader。在本例中只配置了一個css-loader

特性

• loader 支援鏈式傳遞。能夠對資源使用流水線(pipeline)。一組鏈式的 loader 將按照相反的順序執行。loader 鏈中的第一個 loader 返回值給下一個 loader。在最後一個 loader，返回 webpack 所預期的 JavaScript。
• loader 也能夠使用 options 物件進行配置。

外掛plugins

外掛目的在於解決 loader 無法實現的其他事
。由於外掛可以攜帶引數/選項，你必須在 webpack 配置中向 plugins 屬性傳入 new 例項。

應用

1.安裝

npm install --save-dev html-webpack-plugin

2.配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');

module.exports = {
   entry:'./src/main.js',
   output:{
       filename:'bundle.js',
       path: path.resolve(__dirname, 'dist')
   },
    
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
 

配置

由於webpack 配置是標準的 Node.js CommonJS 模組，你可以做到以下事情：

• 通過 require(...) 匯入其他檔案
• 通過 require(...) 使用 npm 的工具函式
• 使用 JavaScript 控制流表示式，例如 ?: 操作符
• 對常用值使用常量或變數
• 編寫並執行函式來生成部分配置

同時避免

• 在使用 webpack 命令列介面(CLI)時訪問命令列介面(CLI)引數
• 匯出不確定的值（呼叫 webpack 兩次應該產生同樣的輸出檔案）
• 編寫很長的配置（應該將配置拆分為多個檔案）

基本配置示例

var path = require('path');

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

模組

在模組化程式設計中，開發者將程式分解成離散功能塊，並稱之為模組。

每個模組具有比完整程式更小的接觸面，使得校驗、除錯、測試輕而易舉。

精心編寫的模組提供了可靠的抽象和封裝界限，使得應用程式中每個模組都具有條理清楚的設計和明確的目的。

什麼是 webpack 模組？

對比 Node.js 模組，webpack 模組能夠以各種方式表達它們的依賴關係，幾個例子如下：

• ES2015 import 語句
• CommonJS require() 語句
• AMD define 和 require 語句
• css/sass/less 檔案中的 @import 語句。
• 樣式(url(...))或 HTML 檔案(``)中的圖片連結

模組解析

resolver 是一個庫(library)，用於幫助找到模組的絕對路徑。

所依賴的模組可以是來自應用程式程式碼或第三方的庫。resolver 幫助 webpack 找到 bundle 中需要引入的模組程式碼，這些程式碼在包含在每個 require/import 語句中。

當打包模組時，webpack 使用 enhanced-resolve 來解析檔案路徑，包括三種類型的路徑：

1.絕對路徑

import "/home/me/file";
import "C:\\Users\\me\\file";

2.相對路徑

import "../src/file1";
import "./file2";

3.模組路徑

import "module";
import "module/lib/file";

快取

每個檔案系統訪問都被快取，以便更快觸發對同一檔案的多個並行或序列請求。在觀察模式下，只有修改過的檔案會從快取中摘出。如果關閉觀察模式，在每次編譯前清理快取。

有關上述配置的更多資訊，請檢視解析 API學習。

依賴圖

任何時候，一個檔案依賴於另一個檔案，webpack 就把此視為檔案之間有 依賴關係 。

這使得 webpack 可以接收非程式碼資源(non-code asset)（例如影象或 web 字型），並且可以把它們作為 依賴 提供給你的應用程式。

從 入口起點 開始，webpack 遞迴地構建一個 依賴圖 ，這個依賴圖包含著應用程式所需的每個模組，然後將所有這些模組打包為少量的 bundle - 通常只有一個 - 可由瀏覽器載入。

官方文件提供的概念還包括manifest、構建目標、模組熱替換