webpack-serve не обслуживает пакетный файл (404 с) - PullRequest
Новая
       10

webpack-serve не обслуживает пакетный файл (404 с)

0 голосов
/ 30 апреля 2018

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 разрешает пакет, и все функции, такие как «горячая перезагрузка», работают как шарм.

Ответы [ 2 ]

0 голосов
/ 14 июля 2018

Используйте параметр devMiddleware: 

module.exports = {
    ...
    serve: {
        devMiddleware: {
            publicPath: '/dist/',
        },
    },
0 голосов
/ 20 мая 2018

Я только что перешел с использования 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.

...