webpack-serve not serving bundle file (404s)

Question

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm.js'
    }
  }
}

Directory structure

webpack.config.js
index.html
package.json
/src
  index.js
  App.vue
  other files
/dist
  <empty>

When I open up http://localhost:8080 after running webpack-serve --config webpack.config.js to display the index.html file which has a line for <script type="text/javascript" src="/dist/bundle.js"></script> I get a 404.

The same goes for running it with the --hot flag.

When I use the --dev flag I get this error and the server won't start.

TypeError: Cannot create property 'publicPath' on boolean 'true'
    at fn (/mnt/c/workspace/docker/budget/node_modules/koa-webpack/index.js:81:28)
    at Object.webpack (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:32:25)
    at Promise.all.then (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:127:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Error: An error was thrown while initializing koa-webpack
 TypeError: Cannot create property 'publicPath' on boolean 'true'
    at Object.webpack (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:43:15)
    at Promise.all.then (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:127:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

I am using webpack-serve 0.3.1

EDIT 1

Here is where it's getting weird. Despite all the path and whatnot options above, this http://localhost:8080/bundle.js or /bundle.js resolves the bundle and all the functions like hot reload work like a charm.

Answer 1

I just moved from using webpack-dev-server to webpack-serve and it was a bit of a hassle; the documentation is definetely lacking.

It seems webpack-serve is currently at v1.0.2, so try upgrading before moving on. You will also need to set up a config file to specify the things you need (see the docs here). Below is my serve.config.js file:

const path = require('path');
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');    

const options = {
  content: path.join(__dirname, 'dist'),
  clipboard: false,
  add: (app, middleware) => {
    middleware.webpack();
    app.use(convert(history()));
  },
};

module.exports = options;

Then run your build using webpack-serve ./webpack.config.js. I have this set up as my npm start script.

Answer 2

Use the devMiddleware option:

module.exports = {
    ...
    serve: {
        devMiddleware: {
            publicPath: '/dist/',
        },
    },