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解析了捆绑包，所有像热重载这样的函数都像魅力一样工作。

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启动脚本。

Answer 2

使用devMiddleware选项：

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

webpack-serve不提供捆绑文件（404s）

编辑1

2 个答案: