Webpack-dev-server: Unclear how to use publicPath(s)

[SuperDJ]

• Operating System: Windows 10
• Node Version: v8.11.1
• NPM Version: 6.1.0
• webpack Version: 4.17.2
• webpack-dev-server Version: 3.1.8

• [x] This is a bug
• [ ] This is a modification request

Code

Gist of webpack.config.js

Expected Behavior

Expected behavour would be that all css and js files are accessed by /dist/(js/css) in webpack dev server

Actual Behavior

What actually happens is that all css and js files return a 404 error.

For Bugs; How can we reproduce the behavior?

Use the config provided in the gist url. You also need the following file structure or repo:

/
  /docs/
   All html files
 /src/
    /js/
      All js files
    /sass/
      All sass files
 webpack.config.js
 packages.json

There are already quite a few issues and SO questions about this topic however there still isn't an answer, fix or solution. And eventough the issues have been closed it apparently is still a problem looking at the SO questions.

• https://stackoverflow.com/questions/52223467/how-to-make-webpack-public-path-work-with-relative-sub-folder
• https://stackoverflow.com/questions/44069537/webpack-dev-server-in-sub-directory-not-compiling-no-hot-reloading?noredirect=1&lq=1
• https://stackoverflow.com/questions/52139658/webpack-issues-with-src-and-dist-files-because-of-the-publicpath?noredirect=1&lq=1
• https://stackoverflow.com/questions/52204987/webpack-dev-server-w-wordpress
• https://stackoverflow.com/questions/47054824/webpack-middleware-with-jekyll-setup-for-context-path
• https://stackoverflow.com/questions/52089412/webpack-dev-server-cannot-get
• https://github.com/webpack/webpack-dev-server/issues/995
• https://github.com/webpack/webpack-dev-server/issues/954
• https://github.com/webpack/webpack-dev-server/issues/1485

[michael-ciniawsky]

It's normally simply better to not modify the publicPath at all, could you post the URL's which currently 404 and give an exact example of how the output structure looks like ?

[michael-ciniawsky]

https://webpack.js.org/configuration/dev-server/#devserver-publicpath-

Make sure publicPath always starts and ends with a forward slash.

It is recommended that devServer.publicPath is the same as output.publicPath.

https://webpack.js.org/configuration/dev-server/#devserver-contentbase

Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence

[michael-ciniawsky]

So within your current config it's likely that

webpack.config.js

output: {
  publicPath: 'docs/dist/'
},
devSever: {
   contentBase: path.resolve(__dirname, 'docs')
}

1. output.publicPath is malformed
2. Does mismatch with devServer.contentBase

[SuperDJ]

The css file giving 404 error: http://localhost:8080/dist/css/material-light.css and the js file: http://localhost:8080/dist/js/material.js.

The docs/index.html is served and working except for the js and css files. All the files trying to serve are static.

When I don't specify the publicPath for output, css and devServer it also doesn't work.

Also have read the docs of publicPath and contentbase many times over but wasn't able to figure it out.

[michael-ciniawsky]

kk, then please run a build ($ webpack, no devServer) and share the output structure you get

[SuperDJ]

Have made a few slight adjustments in the config file. Updated the gist.

When running npm run prod The file structure will be:

/docs
    /js
       /material.js
    /css
       /material-light.css

[SuperDJ]

This filename: process.env.NODE_ENV === 'development' ? './dist/js/[name].js' : './docs/dist/js/[name].js', line might be a bit redundant or atleast it is possible to simplify but put it like this to test and see if that file path made a difference.

[michael-ciniawsky]

filename: process.env.NODE_ENV === 'development' 
    ? './dist/js/[name].js' // <= wrong ${__dirname}/dist
    : './docs/dist/js/[name].js',

devSever: {
   contentBase: path.resolve(__dirname, 'docs')
}

The filename for development seems to be wrong, should be docs/dist/[name].js
instead. I strongly recommend to not 'overcomplicate' this stuff e.g

const OUTPUT_DIR = path.resolve(__dirname, 'docs') // ${__dirname}/docs

const config = {
  output: {
     path: OUTPUT_DIR,
     filname: 'js/[name].js' // ${__dirname}/docs/js
  },
  plugins: [
     MiniCSSExtractPlugin({
        filename: 'css/[name].css' // ${__dirname}/docs/css
     })
  ],
  devServer: {
    contentBase: OUTPUT_DIR // ${__dirname}/docs
  }
}

module.exports = config

[michael-ciniawsky]

This filename: process.env.NODE_ENV === 'development' ? './dist/js/[name].js' : './docs/dist/js/[name].js', line might be a bit redundant or atleast it is possible to simplify but put it like this to test and see if that file path made a difference.

Yes :) that's likely the issue

[michael-ciniawsky]

Works?

[SuperDJ]

Yes that seems to be working. Thanks for that