Webpack-dev-server: webpack dev server cannot serve files in `contentBase` directory

[kerryChen95]

My webpack config is:

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path')
var config = {
  entry: {
    main: 'src/main.js',
  },
  output: {
    path: path.resolve('dist/static'),
    fileName: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../index.html',
    })
  ],
}

I want to use webpack & html-webpack-plugin to output files as below:

dist/index.html
dist/static/main.js

When I use webpack to write file into disk as below, files are outputted as my expectation.

webpack(config).run(function () {})

But when I clear dist directory, then use webpack-dev-server to serve files from memory as below, the URL localhost:8080/index.html return 404.

var compiler = webpack(config)
var server = WebpackDevServer(compiler, {
  contentBase: path.resolve('dist'),
})

Version info:
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

[cebor]

same issue, with latest 1.x version

[Markus-ipse]

Same issue, here as well, with "webpack-dev-server": "~1.14.1"

[SpaceK33z]

I happen to have a very comparable setup (output index.html to dist/index.html, and all assets to dist/static). In your config, do something like this:

output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist/static'),
    publicPath: 'static/',
},

Then for the devServer, I override the publicPath to /. Lastly, for the contentBase, I use process.cwd().

[SpaceK33z]

Note that using contentBase when you're using html-webpack-plugin has no effect. contentBase is meant to serve static files in the given path. The index.html generated by html-webpack-plugin is not static, it's compiled by webpack.

[SpaceK33z]

I'm closing this issue because of inactivity. Feel free to comment, and we can always re-open it again.

[iamface]

I'm having this issue as well. I have always not defined the --content-base but now using it serving into www folder --content-base www/ my app.js file cannot be found loading the index.html. If I remove it, my app continues to work.

[5angel]

Yeah, same thing here: for some reason, dev server cannot reach files in a subfolder (despite them being compiled there). Weird.

[kerryChen95]

@SpaceK33z

Note that using contentBase when you're using html-webpack-plugin has no effect. contentBase is meant to serve static files in the given path. The index.html generated by html-webpack-plugin is not static, it's compiled by webpack.

I guess it's because webpack-dev-server serve static files from memory instead of disk, thus webpack-dev-server cannot server index.html generated by html-webpack-plugin from disk, is it right?

Moreover, how can we serve index.html by webpack-dev-server?

[SpaceK33z]

I guess it's because webpack-dev-server serve static files from memory instead of disk, thus webpack-dev-server cannot server index.html generated by html-webpack-plugin from disk, is it right?

No. html-webpack-plugin will generate the index.html in memory, and webpack-dev-server is able to serve that (when configured correctly, see my first post about that). What I meant was that using contentBase to serve dist/ makes no sense because html-webpack-plugin already adds index.html to the in-memory store of webpack-dev-server.

[SpaceK33z]

Moreover, how can we serve index.html by webpack-dev-server?

Did you see my first comment here about that? I'm using this in literally all my projects so I'm sure it works.

[simonmysun]

Hi @SpaceK33z ,

Thank you for your great project. I have encountered a similar problem and found no answer could help. I must have mistaken the configuration file. Would you please help me have a look? I have deleted irrelevant code to make it clear, and uploaded to Github Repo. You may clone it, install the dependencies and run it.

On my computer npm run dev serves the directory and I can find the index.html and the bundle script nowhere. I have tried to add a contentBase attributed and the result is just serving the corresponding directory. Actually I don't have any static file to serve.

Besides my environment is [email protected] and [email protected] on 4.8.13-1-ARCH.

[SpaceK33z]

@simonmysun okay, this has nothing to do with contentBase, but your issue is that you use publicPath: './'. This should be publicPath: '/' (at least for development). I've checked and that fixes your issue.

[simonmysun]

@SpaceK33z I see! (but.. why?)

Thank you very much!

[wbern]

@SpaceK33z Been trying to follow your advice.

I have these paths
/target/classes/static/js/bundle.js
/target/classes/static/index.html

• publicPath defined as "/"
• output { path } points to path.join(__dirname, 'target/classes/static/js')

output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist/static'),
    publicPath: 'static/',
},

Either the index.html file doesn't get picked up properly in static (or maybe not generated there), or I tinked around a bit and end up breaking something else.

Do you have any good example config to share that is up-to-date with webpack 2?

[iamface]

Hey @wbern,

Here is an example config where I have this working in webpack 2.

// webpack.config.js
module.exports = { // Output file output: { filename: 'app.js', path: __dirname + '/public' }, }

// package.json
"scripts": { "dev": "webpack-dev-server --inline --content-base public/", },

Folder structure:
/app
- app.js
/public
- index.html
- app.js

When I start the dev server, I simply go to http://localhost and my app pulls up.

[Juraj-Masiar]

I had a same issue and now I understand that the content base should be set where the content is based (in you dist folder), not where the page you want to open is located.

So this won't work:

    devServer: {
      contentBase: path.join(__dirname, 'dist', 'index'),
      open: true,
    },

And instead one need to use:

    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      openPage: '/index',
      open: true,
    },