webpack中的path、publicPath和contentBase

時間 2019-11-16

標籤 webpack path publicpath contentbase 简体版

原文原文鏈接

本文主要總結一下webpack裏面關於path、publicPath和contentBase的區別及用法。css

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

在裏面添加兩條命令html

"scripts": {
    ...,
    "build": "webpack",
    "dev": "webpack-dev-server --open chrome"
}
複製代碼

下面經過例子來了解一下path、publicPath和contentBase的區別吧。webpack

output

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。web

path

output裏面的path很好理解，指的就是output目錄對應的一個絕對路徑。chrome

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist') // 輸出目錄對應的絕對路徑
},
複製代碼

運行npm run build 命令打包文件，能夠看到打包以後的文件都輸出到了dist文件夾。npm

publicPath

output中的publicPath經常使用於在生產環境。它會爲全部的資源指定一個基礎路徑。設置了publicPath後，會爲資源添加一個前綴。 看例子：將output中的配置改成：json

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'), // 輸出目錄對應的絕對路徑
        publicPath: '/outputdist/'
},
複製代碼

運行npm run dev 命令能夠看到命令行顯示以下信息： bash

訪問http://localhost:8080/ 結果顯示：
訪問http://localhost:8080/outputdist/ 結果顯示：

由上面兩張圖能夠看出，在output裏面設置了publicPath之後，如果devServer裏面沒有設置publicPath，則使用webpack-dev-server 在進行打包時生成的靜態文件所在的位置以及index.html文件裏面引用資源的前綴都是output.publicPath裏面設置的值服務器

devServer

publicPath

添加devServer的配置：app

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, 命令行顯示以下信息：

能夠看出contentBase指的是 不是由webpack打包生成的靜態文件。

訪問http://localhost:8080/結果顯示：

由於咱們並無aaa目錄，因此根本找不到。而前面的設置沒有設置contentBase，會使用contentBase的默認值，默認就是根目錄。訪問http://localhost:8080/，因爲在根目錄下沒有找到index.html文件，所以會顯示根目錄下的資源文件。
訪問http://localhost:8080/dist/，顯示的結果爲：

可見，contentBase與打包生成的靜態文件所在的位置和index.html裏面引入資源的前綴是沒有影響的。

更改一下配置：

devServer: {
        contentBase: './src', // 不設置的話，默認是當前執行的目錄，通常是項目根目錄。會在項目根目錄查找index.html文件。
        hot: true,
        publicPath: '/dist/'
},
複製代碼

將contentBase設置爲src目錄，src目錄裏面是有index.html文件的。看一下執行結果。運行npm run dev, 訪問http://localhost:8080/結果顯示：