Webpack Web包服务不提供捆绑文件（404s）

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'
    }
  }
}

目录结构

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

我正在使用

编辑1

---

这就是它变得奇怪的地方。尽管上面有所有的路径和诸如此类的选项，这个

http://localhost:8080/bundle.js

或

/bundle.js

解析捆绑包，所有诸如热加载之类的功能都能很好地工作。

我刚从使用

网页包开发服务器

转到

网页包服务

，这有点麻烦；文件确实缺乏

似乎

webpack-service

当前处于

v1.0.2

，所以在继续之前请尝试升级。您还需要设置一个配置文件来指定所需的内容（请参阅文档）。下面是我的

service.config.js

文件：

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;

然后使用

webpack service./webpack.config.js

运行构建。我已将此设置为我的npm启动脚本。

使用以下选项：

---

如果执行此操作，则会出现错误：“配置对象无效。已使用与API架构不匹配的配置对象初始化了Webpack。-配置具有未知属性“serve”。“Webpack serve现在已被弃用，因此我在此处的回答不再有用。看起来您应该切换到webpack dev服务器。

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;

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