webpack5之output和devServer的publicPath區別範例詳解

2022-12-23 14:00:25

一. output的publicPath

我們知道output中的path的作用是打包後檔案輸出的目錄：比如靜態資源的js、css等輸出，常見的會設定為dist、build資料夾等；

output中還有一個publicPath屬性，該屬性是指定index.html檔案打包參照的一個基本路徑：

它的預設值是一個空字串，所以我們打包後引入js檔案時，路徑是 bundle.js；

在開發中，我們也將其設定為 / ，路徑是 /bundle.js，那麼瀏覽器會根據所在的域名+路徑去請求對應的資源；
如果我們希望打包後在本地直接開啟html檔案來執行，會將其設定為 ./，根據./bundle.js相對路徑去查詢資源；

舉例：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包後的檔案的輸出目錄
    path: path.resolve(__dirname, "./build"),
    // 在打包之後的靜態資源前面進行一個路徑的拼接:
     publicPath: "./"
  },
  }

打包後：

二. devServer的publicPath

devServer中也有一個publicPath的屬性，該屬性是指定開發環境webpack serve下開啟本地服務所在的資料夾：

它的預設值是 /，也就是我們直接存取埠即可存取其中的資源 http://localhost:8080；
如果我們將其設定為了 /abc,那麼我們需要通過 http://localhost:8080/abc 才能存取到對應的打包後的資源；

舉例：

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包後的檔案的輸出目錄
    path: path.resolve(__dirname, "./build"),
    // 在打包之後的靜態資源前面進行一個路徑的拼接
     publicPath: "/abc" //和下方publicPath設定一樣
  },
  // 專門為webpack-dev-server
  // devServer為開發過程中, 開啟一個本地服務
  devServer: {
    compress: true, //檔案壓縮啟用 [gzip compression]
    publicPath: "/abc",
    }，
  }

官方提到： devServer.publicPath 與 output.publicPath相同

打包後：

注意：上方devServer設定/abc後，我們其中的bundle.js通過 http://localhost:8080/bundle.js是無法存取的,報錯如下：

所以devServer.publicPath 與 output.publicPath設定要相同！

以上就是webpack5之output和devServer的publicPath區別範例詳解的詳細內容，更多關於webpack publicPath區別的資料請關注it145.com其它相關文章！

webpack5之output和devServer的publicPath區別範例詳解

目錄

一. output的publicPath

二. devServer的publicPath

熱門文章