3

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以显示 index.html 文件时，该文件有一行，<script type="text/javascript" src="/dist/bundle.js"></script>我得到 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解决了捆绑包和所有功能，如热重载，就像一个魅力。

4

2 回答 2

0

使用devMiddleware选项：

module.exports = {
    ...
    serve: {
        devMiddleware: {
            publicPath: '/dist/',
        },
    },
于 2018-07-14T01:58:38.553 回答
0

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

它目前似乎webpack-serve在v1.0.2，所以在继续之前尝试升级。您还需要设置一个配置文件来指定您需要的东西（请参阅此处的文档）。下面是我的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 启动脚本。

于 2018-05-20T07:17:05.843 回答