本文主要總結一下webpack裡面關於path、publicPath和contentBase的區別及用法。
- output裡面的path表示的是output目錄對應的一個絕對路徑。
- output裡面的publicPath表示的是打包生成的index.html檔案裡面引用資源的字首
- devServer裡面的publicPath表示的是打包生成的靜態檔案所在的位置（若是devServer裡面的publicPath沒有設定，則會認為是output裡面設定的publicPath的值）
- devServer裡面的contentBase表示的是告訴伺服器從哪裡提供內容。（只有想提供靜態檔案時才需要）
基本配置
目錄結構
- src
- index.css
- index.js
- index.html
- package.json
- webpack.config.js
複製程式碼webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new webpack.HotModuleReplacementPlugin()
]
}
複製程式碼index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-dev-server</title>
</head>
<body>
<div id="app">aaa</div>
</body>
</html>
複製程式碼index.css
#app {
color: red;
}
複製程式碼index.js
import './index.css'
複製程式碼package.json
在裡面新增兩條命令
"scripts": {
...,
"build": "webpack",
"dev": "webpack-dev-server --open chrome"
}
複製程式碼下面通過例子來了解一下path、publicPath和contentBase的區別吧。
output
output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。
path
output裡面的path很好理解，指的就是output目錄對應的一個絕對路徑。
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') // 輸出目錄對應的絕對路徑
},
複製程式碼執行npm run build 命令打包檔案，可以看到打包之後的檔案都輸出到了dist資料夾。
publicPath
output中的publicPath常用於在生產環境。它會為所有的資源指定一個基礎路徑。設定了publicPath後，會為資源新增一個字首。 看例子： 將output中的配置改為：
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'), // 輸出目錄對應的絕對路徑
publicPath: '/outputdist/'
},
複製程式碼執行npm run dev 命令 可以看到命令列顯示如下資訊：
- 訪問http://localhost:8080/
結果顯示：
- 訪問http://localhost:8080/outputdist/ 結果顯示：
由上面兩張圖可以看出，在output裡面設定了publicPath以後，若是devServer裡面沒有設定publicPath，則使用webpack-dev-server 在進行打包時生成的靜態檔案所在的位置以及index.html檔案裡面引用資源的字首都是output.publicPath裡面設定的值
devServer
publicPath
新增devServer的配置：
devServer: {
hot: true,
publicPath: '/dist/'
}
複製程式碼然後執行npm run dev, 命令列顯示如下資訊：
- 訪問http://localhost:8080/結果顯示：
- 訪問http://localhost:8080/dist/
結果顯示：
可以看出devServer裡面的publicPath表示的是打包生成的靜態檔案所在的位置。並且它的優先順序是最高的。而publicPath代表的是index.html檔案裡面引用資源的字首
contentBase
新增contentBase的配置：
devServer: {
contentBase: './aaa', // 不設定的話，預設是當前執行的目錄，一般是專案根目錄。會在專案根目錄查詢index.html檔案。
hot: true,
publicPath: '/dist/'
},
複製程式碼然後執行npm run dev, 命令列顯示如下資訊：
- 訪問http://localhost:8080/結果顯示：
- 訪問http://localhost:8080/dist/，顯示的結果為：
更改一下配置：
devServer: {
contentBase: './src', // 不設定的話，預設是當前執行的目錄，一般是專案根目錄。會在專案根目錄查詢index.html檔案。
hot: true,
publicPath: '/dist/'
},
複製程式碼將contentBase設定為src目錄，src目錄裡面是有index.html檔案的。看一下執行結果。 執行npm run dev, 訪問http://localhost:8080/結果顯示：