webpack中path、publicPath的關係

前序

工欲善其事，必先利其器。

本地開發

本地開發須要起一個本地服務，」http:localhost:8080「訪問的就是咱們在本機上的8080端口開啓的服務。這個服務機制是誰搞的呢？答案是：webpack-dev-server。而且爲了保證熱加載的速度夠快，webpack-dev-server將webpack build出來的代碼直接保存到內存中，便於讀取與更改。

線上部署

既然webpack-dev-server使用的是內存中的build資源，那咱們在磁盤中看到的webpack build出來的文件（默認是放在dist目錄下的）是幹嗎的呢？

答案是：用於部署到線上機器上的。一個構建機器負責build一份代碼（放在磁盤上的path下），而後部署到線上服務上，客戶端訪問的資源就是在這個線上服務上的。

path

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
},複製代碼

webpack build以後代碼存儲在磁盤上的位置。本地開發時用不到這個path下的資源，線上部署的時候用這個build出來的資源去發佈線上機器。

publicPath

在本地開發時webpack-dev-server訪問的是內存中的build資源。而客戶端的線上環境，纔是由構建機器build出來的保存在path目錄下，並部署到線上機器的資源。可是客戶端咋知道咱們的機器的地址呢？答案就是：publicPath。publicPath在本地環境指的是webpack-dev-server運行的內存代碼的地址；在線上環境，publicPath就表明着客戶端所訪問的上線資源地址。

總之，publicPath就是客戶端訪問的資源的地址。

當publicPath是相對路徑時，資源路徑是相對於index.html文件的；當publicPath  是絕對路徑時，資源的被訪問路徑前綴直接就是這個絕對路徑；

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://localhost:8080/'
 },複製代碼

這裏，publicPath是絕對路徑，則頁面中webpack build出來的a.js文件代碼的路徑就是http://localhost:8080/a.bundle.js =>${域名}+${publicPath}+${文件名}.bundle.js

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'outdist'
 },複製代碼

這裏，publicPath是相對路徑，則頁面中webpack build出來的a.js文件代碼的路徑就是http://localhost:8080/outdist/a.bundle.js=>${publicPath}+${文件名}.bundle.js

實踐

/* package.json */

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open --mode development"
  },複製代碼

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "outDist",
    },
    mode: 'development',
    module: {
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, "contentdist"),
        port: 8080,
        host: 'localhost',
        overlay: true,
        compress: true,
    },
}複製代碼

咱們運行yarn dev( "dev": "webpack-dev-server --open --mode development")

能夠看到，webpack-dev-server上運行的代碼是在內存中的 outDist下

），而非webpack產物的其餘靜態資源是在

contentdist目錄下。

webpack output is served from /outDist
Content not from webpack is served from /Users/panzhiying/study/webpack4-init/contentdist 
Hash: c042bc2a7a1f180291f8複製代碼

因爲咱們的html文檔也是靜態資源，因此此時頁面的訪問路徑是：http://localhost:8080/outdist。

咱們運行yarn build("build": "webpack")，

項目裏會多出一個

dist目錄，裏面是webpack的編譯產物。