深入理解assetspublicpath

一、什麼是assetspublicpath

assetspublicpath是Webpack中的一個重要配置項，它用於指定在瀏覽器中引入的靜態資源文件（如圖片、字體、樣式表等）的公共路徑。

這個公共路徑有時也被稱為CDN地址，它可以將靜態資源文件託管到雲端服務，加快頁面的載入速度，減輕伺服器的負擔。除此之外，在配置多個Webpack打包入口的時候，這個配置項也可以幫助我們區分不同的資源路徑，避免文件覆蓋或載入錯誤。

二、assetspublicpath的配置方法

在Webpack中，我們可以通過兩種方式對assetspublicpath進行配置：通過Webpack配置對象，或是通過外部命令行參數。

1. 通過Webpack配置對象

module.exports = {
  output: {
    publicPath: "https://cdn.example.com/assets/"
  }
};

在Webpack的配置文件（通常是webpack.config.js）中，我們可以在output節點下的publicPath屬性來配置assetspublicpath。這裡，我們以一個CDN地址https://cdn.example.com/assets/為例。

具體而言，當Webpack打包完成後，所有的靜態資源文件（如圖片、字體、樣式表等）的引用路徑都將以https://cdn.example.com/assets/為前綴。

2. 通過外部命令行參數

npx webpack --env.publicPath=https://cdn.example.com/assets/

除了在Webpack配置文件中進行配置之外，我們還可以通過命令行參數來指定assetspublicpath。這裡，我們使用npx webpack命令，並在其後追加--env.publicPath參數來指定CDN地址。

需要注意的是，使用命令行參數配置assetspublicpath時，我們必須在Webpack配置文件中為其聲明環境變數：

module.exports = (env) => {
  return {
    output: {
      publicPath: env.publicPath
    }
  };
};

三、assetspublicpath的使用場景

雖然assetspublicpath配置項在Web開發中非常常見，但它並非在所有場景下都必須使用。下面，我們將介紹幾個在Web開發中常見的assetspublicpath的使用場景。

1. 使用CDN加速靜態資源

作為一種基於雲端服務的解決方案，CDN技術可以幫助我們將靜態資源文件（如圖片、字體、樣式表等）託管到雲端服務，實現全球快速訪問。在這種情況下，我們可以使用assetspublicpath來配置CDN地址。

module.exports = {
  output: {
    publicPath: "https://cdn.example.com/assets/"
  }
};

2. 區分多個Webpack打包入口

在Webpack中，我們可以配置多個打包入口，每個入口會生成一個獨立的打包結果。在這種情況下，assetspublicpath可以幫助我們區分不同的資源路徑，避免文件覆蓋或載入錯誤。

module.exports = {
  entry: {
    main: "./src/main.js",
    admin: "./src/admin.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    publicPath: "/"
  }
};

這裡，我們配置了兩個Webpack打包入口：main和admin。相應地，在output的publicPath屬性中，我們指定了根路徑（即/）。

在生成的文件中，Webpack會根據以上配置，將靜態資源路徑視為根路徑+打包入口名稱，生成如下的文件引用路徑：

// main.bundle.js
/assets/main.bundle.js

// admin.bundle.js
/assets/admin.bundle.js

3. 實現HMR功能

熱模塊替換（HMR）是Webpack的一個重要特性，它可以使得應用程序在不刷新頁面的情況下進行更新。在這種情況下，assetspublicpath可以幫助我們正確地給每個模塊生成唯一的ID，避免HMR導致的資源緩存問題。

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
    publicPath: "/"
  },
  devServer: {
    hot: true
  },
  optimization: {
    runtimeChunk: "single"
  }
};

這裡，我們通過[hash]佔位符來生成唯一的資源ID。同時，我們還使用了runtimeChunk配置項來把Webpack運行時代碼（runtime）提取到一個單獨的文件中。

在開啟HMR後，每個模塊的引用路徑將會被替換為以下格式，其中{hashedModuleIds}表示使用模塊的哈希值作為模塊ID。

// 普通模塊
__webpack_require__.hmr({ moduleId: {hashedModuleIds} } ...

// runtime模塊
__webpack_require__.hmr({ runtime: {hashedRuntimeId} }, ...

四、總結

通過本篇文章，我們對於Webpack中的assetspublicpath配置項有了更深入的理解。無論是使用CDN加速靜態資源，還是區分多個Webpack打包入口，亦或是實現HMR功能，assetspublicpath都是一個非常有用的配置選項，在Web開發中具有廣泛的應用。