output.publicPath & devServer.publicPath
output裏面的publicPath表示的是打包生成的index.html文件裏面引用資源的前綴；javascript
devServer裏面的publicPath表示的是打包生成的靜態文件所在的位置（如果devServer裏面的publicPath沒有設置，則會認爲是output裏面設置的publicPath的值）；css
兩個publicPath能夠看做是devServer對生成目錄dist設置的虛擬目錄，devServer首先從devServer.publicPath中取值，若是它沒有設置，就取output.publicPath的值做爲虛擬目錄，若是它也沒有設置，就取默認值 "/"。html
output.publicPath，不只能夠影響虛擬目錄的取值，也影響利用html-webpack-plugin插件生成的index.html中引用的js、css、img等資源的引用路徑。會自動在資源路徑前面追加設置的output.publicPath。前端
示例
基本目錄
配置
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
libraryTarget: "umd",
publicPath: '/asset/'
},
resolve: {
extensions: ['.js', '.vue', '.json']
},
externals: {
tools: "tools"
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'hello world',
template: './src/index.html',
filename: 'index.html'
})
],
devServer: {
host: 'test.m.iqiyi.com',
port: '9393'
}
};
經過訪問 http://test.m.iqiyi.com:9393/， 咱們發現沒法訪問到頁面，只是顯示出了目錄
vue
若是咱們訪問http://test.m.iqiyi.com:9393/asset/， 能夠正常訪問到頁面
java
經過上面兩個圖片的對比，能得出output.publicPath影響着devServer的虛擬目錄的設置。同時內部引用的js路徑也被修改成output.publicPathnode
若是咱們修改配置：webpack
devServer {
publicPath: "test"
}
訪問 http://test.m.iqiyi.com:9393/test/， 以下圖所示：
web
咱們會發現，虛擬目錄優先取devServer中的publicPath，index.html中的js路徑仍然取的output.publicPath，可是因爲二者值不同，因此server找不到 /asset/的虛擬目錄。json
contentBase
devServer裏面的contentBase表示的是告訴服務器從哪裏提供內容。（也就是服務器啓動的根目錄，默認爲當前執行目錄，通常不須要設置）
path
output裏面的path表示的是output目錄對應的一個絕對路徑
html-webpack-plugin
這個插件用於將css和js添加到html模版中，其中template和filename會受到路徑的影響，從源碼中能夠看出
template做用：用於定義模版文件的路徑
源碼：
this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);
複製代碼所以template只有定義在webpack的context下才會被識別，webpack context的默認值爲process.cwd()，既運行 node 命令時所在的文件夾的絕對路徑
filename做用：輸出的HTML文件名，默認爲index.html，能夠直接配置帶有子目錄
源碼：
this.options.filename = path.relative(compiler.options.output.path, filename);
複製代碼因此filename的路徑是相對於output.path的，而在webpack-dev-server中，則是相對於webpack-dev-server配置的publicPath。
若是webpack-dev-server的publicPath和output.publicPath不一致，在使用html-webpack-plugin可能會致使引用靜態資源失敗，由於在devServer中仍然以output.publicPath引用靜態資源，和webpack-dev-server的提供的資源訪問路徑不一致，從而沒法正常訪問。
有一種狀況除外，就是output.publicPath是相對路徑，這時候能夠訪問本地資源
因此通常狀況下都要保證devServer中的publicPath與output.publicPath保持一致。
參考文章：
https://juejin.im/post/5bb085dd6fb9a05cd24da5cf
https://juejin.im/post/5ae9ae5e518825672f19b094
推薦閱讀
關注我
掃一掃 關注個人公衆號【前端名獅】，更多精彩內容陪伴你！
本文分享自微信公衆號 - 壹前端（yiqianduan）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。