Конфигурация веб-пакета: devServer.historyApiFallback и output.publicPath

Question

Недавно я столкнулся с той же проблемой, что и сообщение "historyApiFallback не работает на сервере разработки Webpack" .

---

Сначала я процитирую принятый ответ в этом сообщении .

Ответ:

Я встречаю тот же вопрос сегодня. пусть конфиг в webpack.config.js: output.publicPath будет равен devServer.historyApiFallback.index и укажите html-файл route.my, версия webpack-dev-server 1.10.1 и работает хорошо. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option не работает, вы должны указать маршрут файла html.

module.exports = {
    entry: "./src/app/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle-main.js'
    },
    devServer: {
        historyApiFallback:{
            index:'build/index.html'
        },
    },
};

---

Я пытался использовать этот ответ, чтобы исправить проблему (установите output.publicPath: 'dist' и devServer.historyApiFallback:{index:'dist/index.html'}) но почему-то это не сработало.

После некоторого поиска я нашел эту страницу . Согласно описанию на странице:

Этот раздел для всех, кто сталкивался с этой проблемой в разработке используя webpack-dev-server .. Как и выше, что нам нужно сделать, это сказать Webpack Dev Sever для перенаправления всех запросов к серверу в /index.html. В настройках вашего веб-пакета есть только два свойства, которые вам нужно установить для этого publicPath и historyApiFallback.

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

---

В соответствии с конфигом я изменил свой devServer.historyApiFallback на true, а output.publicPath на /.

Мой конфиг веб-пакета:

const webpack = require("webpack")
const path = require("path")
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: {
    app: "./src/base/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    publicPath: '/',
    path: path.resolve(__dirname, "dist")
  },
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    port: 3000,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
        use: [
          {
            loader: 'url-loader'
          },
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/base/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
}

Казалось, все работает сейчас .

Но у меня есть загадка, что Я не знаю, почему это работает .

---

Чтобы быть конкретным

1. devServer.historyApiFallback: true ясно в соответствии с webpack doc , поэтому я не сомневаюсь в этой части.

2. output.publicPath:/ довольно расплывчато для меня.

Вопрос:

1. Если я попытался использовать что-то вроде output.publicPath:/public, это не будет работать. Так почему я должен использовать output.publicPath:/ здесь?
2. Как output.publicPath:/ может сказать webpack-devserver найти правильное место и сервер правильный index.html (который генерируется devserver я верю)?

Извините, если это немного утомительно. Я просто хочу предоставить некоторые детали.