__webpack_public_path__ does not work in webpack 2

[leaves4j]

I'm submitting a bug report

Webpack version:
2.1.0-beta.25

Please tell us about your environment:
OSX 10.x

Current behavior:
set __webpack_public_path__ doesn't work

Expected/desired behavior:
I set __webpack_public_path__ = 'assets' in entry.js,then use System.import('xxxx'), the require path doesn't contain 'assets

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [ES6/7]

[sokra]

It does work. Could you add a complete example? Check twice that __webpack_public_path__ = is executed before importing the modules that reference it. imports are hoisted.

[TheLarkInn]

@leaves4j have you been able to verify this, otherwise I'll close this until you come across a concrete example.

[lili21]

similar issue here. __webpack_public_path__ only work for lazily-load chunks.

I'm using require.ensure for lazying-loading.

[lili21]

should I open a new issue ?

question about imports are hoisted,

// app.js
__webpack_public_path__ = 'assets/'

require('./module-a')
...

// module-a.js
import './components'

is __webpack_public_path__ = executed before import './components

[lili21]

my webpack config. webpack@2.2.0-rc.2

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: [ './client/bootstrap/app.js' ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[chunkhash:6].js',
    chunkFilename: '[name].[chunkhash:6].js',
    publicPath: '/'
  },
  externals: {
    'jquery': '$',
    'angular': 'angular'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'assets/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'assets/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              root: '~',
              ignoreCustomFragments: [/\{\{.*?}}/],
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.json$/,
        use: [
          {
            loader: 'json-loader'
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader',
              query: {
                sourceMap: true,
                includePaths: ['node_modules'],
                indentedSyntax: true
              }
            }
          ]
        })
      }
    ]
  },
  resolve: {
    modules: [
      'client',
      'client/assets',
      'node_modules'
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html.etpl',
      template: 'client/bootstrap/index.html.etpl.ejs',
      inject: false,
      chunksSortMode: 'dependency',
      excludeChunks: ['manifest']
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module) {
        const userRequest  = module.userRequest

        if (typeof userRequest !== 'string') {
          return false
        }

        return userRequest.indexOf('node_modules') >= 0
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'mainifest']
    }),

    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true
    }),

    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    new ExtractTextPlugin({
      filename: '[name].[contenthash:6].css',
      allChunks: true
    })
  ]
}

[andreiglingeanu]

@lili21 That's the solution you're looking for: #2776 (comment)

And no, that's not a bug, it is known behavior.

[lili21]

Looks like my issue is related to html-webpack-plugin. issue

[novemberborn]

Per https://webpack.js.org/guides/public-path/#set-value-on-the-fly:

Another possible use case is to set the public path on the fly. webpack exposes a global variable that let's you do that, it's called webpack_public_path.

However if APIPlugin does what I think it does, any usage of __webpack_public_path__ gets replaced by __webpack_require__.p. Which is fixed to the build-time publicPath value.

This then breaks file-loader which correctly attempts to use __webpack_public_path__.

[novemberborn]

Reassigning __webpack_require__.p appears to fix this issue. Presumably it could be set to __webpack_public_path__ || "" if there is no configured publicPath.

[novemberborn]

I've been able to remove my workarounds after upgrading to webpack@3 and file-loader@0.11.2.

[pastinepolenta]

@novemberborn Comments seem correct to me but I still have the issue with "webpack": "3.5.5" and "file-loader": "1.1.4". The quick workaround was to make the __webpack_public_path__ global in my code like:

__webpack_public_path__ = 'my custom path';
window.__webpack_public_path__ = __webpack_public_path__;

But this should be avoided. So shouldn't file-loader use __webpack_require__.p instead of __webpack_public_path__ ?

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.