2 thoughts on “What does “publicPath” in webpack do?

  1. @bebraw

    Project Dir Look Like This:
    mkdir demo & cd demo
    npm init
    mkdir app & cd app
    touch index.js
    //add a picture to this dir (name vslogo.png)
    cd ..
    mkdir build & cd build
    touch index.html
    cd ..
    touch webpack.config.js
    
    And index.html:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
    </html>
    And index.js:
    var app = document.createElement('div');
    app.innerHTML = '<h1>Hello World APP</h1>';
    document.body.appendChild(app);
    
    var img = document.createElement('img');
    img.src = require('./vslogo.png');
    document.body.appendChild(img);
    And webpack.config.js:
    var path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');
    
    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH, 'app');
    var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
    
    module.exports = {
        entry: APP_PATH,
        output: {
            path: BUILD_PATH,
            filename: 'bundle.js',
            publicPath: 'assets/'
        },
        module: {
            loaders: [
                {test: /\.(png|jpg)$/, loader: 'url?limit=10'}
            ],
        },
    }

    Then visit index.html by http way. The bundle.js include a module:

    /* 1 */
    /***/ function(module, exports, __webpack_require__) {
    
        module.exports = __webpack_require__.p + "471c6d744dd33627434556a807bb0898.png";
    
    /***/ }

    __webpack_require__.p is assets/, so i wonder if any resource will add __webpack_require__.p prefix, and if this, assum my project has index.js and jquery.js from CDN, how i should write this publicPath property ? I am so confused .

Comments are closed.