How to map a base url to the contentBase in webpack-dev-server

user_8338541 0
Viewed 6688

I don't know how this can be achieved through the webpack-dev-server (2.4.5).

My app's base url is http://localhost:3001/app

All the static assets including the bundle.js is placed in the folder "/dist" under the project.

I had the following settings, but it can't find the images.

devServer: {
  publicPath: '/app',
  contentBase: '/dist'
}

All the requests of static assets also follow the baseUrl. e.g. http://localhost:3001/app/image1.jpg

I think it can't find the images because there is no folder "app" existed in the project.

Could some one advise me how to achieve this goal without changing the directory in the project? Or, is there any way that webpack can map the baseUrl to the contentBase?

webpack-dev-server webpack
1 Answers

Your devServer.publicPath should be the same as output.publicPath. So in your config you probably should have this:

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/app/'),
    publicPath: '/app/'
}

The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from. https://webpack.js.org/configuration/output/#output-publicpath

user_73137270
Related