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

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: html-webpack-plugin@1.7.0 webpack@1.12.9 webpack-core@0.6.8 webpack-dev-middleware@1.4.0 webpack-dev-server@1.14.0

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (6 by maintainers)

Commits related to this issue

Fix webpack config for development https://github.com/webpack/webpack-dev-server/issues/362#issuecomment-274937525 — committed to simonmysun/firebase-auth by simonmysun 7 years ago

Most upvoted comments

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

+20

SpaceK33z on Sep 8, 2016

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.

+15

SpaceK33z on Sep 7, 2016

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.

iamface on Mar 23, 2017

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.

SpaceK33z on Dec 22, 2016

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 on Aug 27, 2016

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 on Dec 22, 2016

@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.

SpaceK33z on Jan 24, 2017