publicPath Option Confusion

[EvHaus]

• Operating System: macOS
• Node Version: v9.6.1
• Yarn Version: v1.3.2
• webpack Version: v4.0.1
• webpack-dev-middleware Version: Not sure. Whatever [email protected] uses

• This is a feature request
• This is a bug

Description

This is a repost of webpack-contrib/webpack-serve#24 in webpack-serve. I was told the bug actually has to do with webpack-dev-middleware.

Hopefully @shellscape can provide some additional context as I'm not 100% sure what the internal issues are.

webpack.config.js

{
	entry: {
		app: '/var/www/html/js/index.js',
	},
	mode: 'development',
	output: {
		path: '/var/www/html/build/',
		publicPath: './build/',
		filename: '[name].js',
	},
	serve: {
		content: '/var/www/html/build/',
		dev: {
			// Why is this needed?
			publicPath: '/build/',
		}
	},
}

Expected Behavior

In the config above, note that serve.dev.publicPath is included. This seems to be the only way to get webpack-serve to serve content out of the /build directory, even though I have output.publicPath also set to /build.

I was expecting NOT needing the serve.dev.publicPath value to need to be set, but without it the web server serves the content out of http://localhost/app.js instead of http://localhost/build/app.js.

Actual Behavior

The output.publicPath value of the config is not respected when running webpack-server.

Furthermore, the behavior of output.publicPath and serve.dev.publicPath is slightly different. The output value is global (so I use ./build), but the serve value is relative, so I have to use /build (note the lack of initial dot).

This was highly unexpected when migrating from webpack-dev-server to webpack-serve and I ended up losing quite a lot of time during the migration. If this is behavior is as-designed, would it be possible to explicitly describe this in the docs so other people who run into this aren't as surprised?

[shellscape]

Thanks for migrating this issue over here.

So far as I can tell, webpack-dev-server does set a publicPath if one exists in the config, and the option hasn't been specified.

https://github.com/webpack/webpack-dev-server/blob/f0534fc3b900735a6474207365209406cda574ad/bin/webpack-dev-server.js#L264-L270

But that doesn't really take into consideration or provide a means to accurately parse a publicPath like './build/ with a leading relative designator. And in that situation I would think you'd have to specify the two publicPath properties all the same - one for webpack, one for dev-server (which passes it onto WDM).

In any case, I think I can update WDM to handle almost all situations. The ones that get tricky are when the user uses a url without protocol, for example. The relative paths are also going to be a trick. It's going to take some time to get this right, given the silly myriad of options that webpack allows for in output.publicPath.

[shellscape]

Closing due to inactivity and age.

[andreujuanc]

@shellscape i think this issue it's something that should be discussed.

I had the same problem. Until I found that i have to set "serve.dev.publicPath"..

Better to change behaviour or, even better improve docs.

This is the opposite of developer friendly.

Devs dont want to be experts in webpack.. It's just a tool.

EDIT:
this will make you use multiple config files or pass arguments while using serve

[agilgur5]

Just spent a few hours debugging this and was super confused. Came here from the related issue in webpack-serve

As far I could tell, It seemed like there might be a need for a utility library for webpack libs to interpret publicPath options the same way as core webpack. WDM and file-loader seem to handle this differently, which was particularly confusing. file-loader handled relative paths like build/fonts/ okay, but WDM did not seem to correctly handle build/ (based on the comments here, I guess relative paths are unimplemented / have undefined behavior?) so I had to use /build/ which was inconsistent with the rest of my webpack config.

Sample for anyone who might find it useful/helpful:

var outputDir = 'build/'

// webpack's configuration
module.exports = {
  ...
  entry: {
    main: './main.js'
  },
  output: {
    path: path.join(__dirname, outputDir), // where builds go
    filename: '[name].bundle.js'
  },
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(ttf|eot|woff|woff2|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/',
          // must set publicPath to route to build/fonts/ instead of fonts/
          // see example in https://github.com/webpack-contrib/file-loader/pull/246
          publicPath: outputDir + 'fonts/'
        }
      }
    ]
  }
}

// webpack-serve configuration
module.exports.serve = {
  ...
  devMiddleware: {
    // MUST be set to not be routed to /
    // cannot use relative paths, so must use /build/
    // see https://github.com/webpack/webpack-dev-middleware/issues/269
    publicPath: '/' + outputDir
  },
  ...
}