webpack output.publicPath

這篇文章用例子講解我在webpack的學習過程中遇到的publicPath問題。

對於按需加載(on-demand-load)或加載外部資源(external resources)（如圖片、文件等）來說，output.publicPath 是很重要的選項。如果指定了一個錯誤的值，則在加載這些資源時會收到 404 錯誤。創建項目目錄如下：

index.js:

import './css/style.css'
import MyImage from './assets/bg.jpg'

function component(){
    const element = document.createElement('div')

    element.innerHTML = 'hello webpack'
    element.classList.add('hello')

    const img = document.createElement('img')
    img.src = MyImage

    document.body.appendChild(img)

    return element
}

document.body.appendChild(component())

webpack.config.js:

const path = require('path')

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, '../src'),
    entry: {
        app: './index.js'
    },
    output: {
        filename: '[name].bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

style.css:

body{
    margin: 0;
}
.hello {
    color: red;
    height: 120px;
    background: url("../assets/bg.jpg") no-repeat;
    background-size: 100%;
    text-align: center;
}

img {
    width: 40px;
    height: 40px;
}

可知在index.js中通過import MyImage from './assets/bg.jpg'，以及在style.css中通過background: url("../assets/bg.jpg") no-repeat;同時引用了圖片bg.jpg。webpack.config.js中沒有設置output.publicPath。運行webpack打包。打包後的目錄如下：

查看瀏覽器運行結果：

結果發現圖片並沒有正常顯示。檢查network，可以看到圖片的引用地址爲file:///Users/lizuncong/Documents/webpack-demos/demo3-1/26f9c98952a19416da7a33221049f01c.jpg。明顯不對的。查看app.bundle.js文件：

可以看到webpack運行函數中__webpack_require__.p = ""; 然後./assets/bg.jpg的導出路徑爲__webpack_require__.p + \"26f9c98952a19416da7a33221049f01c.jpg\"。

修改webpack.config.js，給output的設置publicPath: 'dist/'。並運行webpack。可以發現瀏覽器能正常顯示圖片了。

const path = require('path')

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, '../src'),
    entry: {
        app: './index.js'
    },
    output: {
        filename: '[name].bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

觀察app.bundle.js，可知__webpack_require__.p = "dist/";正是我們在output.publicPath中設置的值。