New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

__webpack_public_path__ does not work in webpack 2 #3265

Closed
leaves4j opened this Issue Nov 10, 2016 · 13 comments

Comments

Projects
None yet
8 participants
@leaves4j

leaves4j commented Nov 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Nov 10, 2016

Member

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.

Member

sokra commented Nov 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@TheLarkInn

TheLarkInn Nov 22, 2016

Member

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

Member

TheLarkInn commented Nov 22, 2016

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

@lili21

This comment has been minimized.

Show comment
Hide comment
@lili21

lili21 Jan 10, 2017

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

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

lili21 commented Jan 10, 2017

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

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

@lili21

This comment has been minimized.

Show comment
Hide comment
@lili21

lili21 Jan 10, 2017

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 commented Jan 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@lili21

lili21 Jan 10, 2017

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
    })
  ]
}

lili21 commented Jan 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@andreiglingeanu

andreiglingeanu Jan 10, 2017

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

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

andreiglingeanu commented Jan 10, 2017

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

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

@lili21

This comment has been minimized.

Show comment
Hide comment
@lili21

lili21 Jan 11, 2017

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

lili21 commented Jan 11, 2017

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

@novemberborn

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jun 6, 2017

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 commented Jun 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jun 6, 2017

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 commented Jun 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Aug 30, 2017

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

novemberborn commented Aug 30, 2017

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

@stilllife00

This comment has been minimized.

Show comment
Hide comment
@stilllife00

stilllife00 Oct 4, 2017

@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__ ?

stilllife00 commented Oct 4, 2017

@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 comment has been minimized.

Show comment
Hide comment
@webpack-bot

webpack-bot Apr 4, 2018

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.

webpack-bot commented Apr 4, 2018

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.

@webpack-bot webpack-bot added the inactive label Apr 4, 2018

@webpack-bot

This comment has been minimized.

Show comment
Hide comment
@webpack-bot

webpack-bot Apr 19, 2018

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

webpack-bot commented Apr 19, 2018

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment