一. output的publicPath

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

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

• 它的默認(rèn)值是一個(gè)空字符串，所以我們打包后引入js文件時(shí)，路徑是 bundle.js；

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

舉例：

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

打包后： 

二. devServer的publicPath

devServer中也有一個(gè)publicPath的屬性，該屬性是指定開(kāi)發(fā)環(huán)境webpack serve下開(kāi)啟本地服務(wù)所在的文件夾：

• 它的默認(rèn)值是 /，也就是我們直接訪問(wèn)端口即可訪問(wèn)其中的資源 http://localhost:8080；
• 如果我們將其設(shè)置為了 /abc,那么我們需要通過(guò) http://localhost:8080/abc 才能訪問(wèn)到對(duì)應(yīng)的打包后的資源；

舉例：

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的輸出目錄
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的靜態(tài)資源前面進(jìn)行一個(gè)路徑的拼接
     publicPath: "/abc" //和下方publicPath設(shè)置一樣
  },
  // 專(zhuān)門(mén)為webpack-dev-server
  // devServer為開(kāi)發(fā)過(guò)程中, 開(kāi)啟一個(gè)本地服務(wù)
  devServer: {
    compress: true, //文件壓縮啟用?[gzip compression]
    publicPath: "/abc",
    }，
  }

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

打包后： 

注意：上方devServer設(shè)置/abc后，我們其中的bundle.js通過(guò) http://localhost:8080/bundle.js是無(wú)法訪問(wèn)的,報(bào)錯(cuò)如下：

所以devServer.publicPath 與 output.publicPath設(shè)置要相同！

以上就是webpack5之output和devServer的publicPath區(qū)別示例詳解的詳細(xì)內(nèi)容，更多關(guān)于webpack publicPath區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論