webpack5之output和devServer的publicPath區(qū)別示例詳解

更新時間：2022年12月22日 16:09:00 作者：想賺點零花錢

這篇文章主要為大家介紹了webpack5之output和devServer的publicPath區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一. output的publicPath

我們知道output中的path的作用是打包后文件輸出的目錄：比如靜態(tài)資源的js、css等輸出，常見的會設置為dist、build文件夾等；

output中還有一個publicPath屬性，該屬性是指定index.html文件打包引用的一個基本路徑：

它的默認值是一個空字符串，所以我們打包后引入js文件時，路徑是 bundle.js；

在開發(fā)中，我們也將其設置為 / ，路徑是 /bundle.js，那么瀏覽器會根據(jù)所在的域名+路徑去請求對應的資源；
如果我們希望打包后在本地直接打開html文件來運行，會將其設置為 ./，根據(jù)./bundle.js相對路徑去查找資源；

舉例：

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

打包后：

二. devServer的publicPath

devServer中也有一個publicPath的屬性，該屬性是指定開發(fā)環(huán)境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"),
    // 在打包之后的靜態(tài)資源前面進行一個路徑的拼接
     publicPath: "/abc" //和下方publicPath設置一樣
  },
  // 專門為webpack-dev-server
  // devServer為開發(fā)過程中, 開啟一個本地服務
  devServer: {
    compress: true, //文件壓縮啟用?[gzip compression]
    publicPath: "/abc",
    }，
  }