sunmingtao / sample-code

3 stars 4 forks source link

What's the use of publicPath attribute in webpack? #234

Closed sunmingtao closed 3 years ago

sunmingtao commented 3 years ago

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: 'dist/'
    },
    ...

js

import Kiwi from './details.png';

function addImage() {
    const img = document.createElement('img');
    img.width = 300;
    img.src = Kiwi;
    const body = document.querySelector('body');
    body.appendChild(img);
}
sunmingtao commented 3 years ago

Inspect the html element

image

Now change it to publicPath: 'auto'

image

It's also possible to change publicPath to a CDN URL. e.g. publicPath: 'https://some-cdn/'