webpack-serve 不提供捆绑文件 (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'
    }
  }
}

目录结构

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

当我打开 http://localhost:8080运行后webpack-serve --config webpack.config.js显示包含 <script type="text/javascript" src="/dist/bundle.js"></script> 行的 index.html 文件我收到 404。

用 --hot 运行它也是如此旗帜。

当我使用 --dev标记我收到此错误，服务器无法启动。

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)

我正在使用 webpack-serve 0.3.1

编辑 1

这就是它变得奇怪的地方。尽管有上面所有的路径和诸如此类的选项，这个 http://localhost:8080/bundle.js或 /bundle.js解析 bundle 和热重载等所有功能都非常有效。

Answer 1

我刚刚从使用 webpack-dev-server 转移到 webpack-serve ，这有点麻烦；文档绝对缺乏。

webpack-serve 目前似乎是 v1.0.2，所以在继续之前尝试升级。您还需要设置一个配置文件来指定您需要的东西(参见文档 here )。下面是我的 serve.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-serve ./webpack.config.js 运行您的构建。我将其设置为我的 npm 启动脚本。