webpack中路徑的理解

webpack 前端打包工具, 開發人員要面對的路徑主要是: 打包前的路徑(開發環境路徑)和打包後的路徑(生產環境路徑)

在webpack.config.js中配置的output.path, output.publicPath, 以及各類插件, loader中的outputPath, publicPath, 這些都是針對的打包後的路徑
咱們編寫的源代碼中(通常存放在src目錄下面的js, html, css)會引用各類資源文件, 這些資源文件的路徑都是打包前的路徑, 這些路徑都是和項目目錄結構有關

舉例說明

上面是項目的基本結構,

 

打包前路徑: 
若是咱們main.js中引入樣式文件和圖片文件應該這樣寫

import myimg from './images/圖片.png'
import "./css/樣式.scss";

這裏的路徑都是基於項目結構的, 當main.js文件要引用資源的時候, 就以main.js路徑爲起點.來寫資源文件的路徑. 引用js文件也同樣, 只是node_modules中的文件在引用時能夠省略node_modules目錄的路徑, 這是node的規則.
css樣式文件中資源的引用也同樣, 以要編寫的css文件爲起點,來寫資源文件的路徑.

 

打包後路徑:
打包後的文件就是要部署到web服務器上的, 因此這裏的路徑分兩種, 一種是文件在web服務器上的物理路徑, 還一種就是用戶訪問的網站路徑.
仍是以上面的項目結構來講
build目錄種存放的就是打包後的文件, build中的目錄結構在某種程度上(只是某種程度上)就是web服務器上的目錄結構.這些目錄結構主要是由output.path及插件和loader中的outputPath屬性來指定的.
output.publicPath及插件和loader中的publicPath默認爲空字符"", 當用戶訪問網站的路徑和web服務器的物理路徑一一對應的時候publicPath不設置是沒有問題, 當用戶訪問的網站路徑和web服務器物理路徑不是一一對應的時候, 換句話說就是web服務器設置了路徑重寫, 這時就須要設置publicPath, 設置publicPath後, 用戶訪問網站的路徑就變成了 publicPath+outputPath, 這個能夠從生產文件中的資源路徑來驗證
另外, 插件和loader中的publicPath會覆蓋output.publicPath的設置