Webpack 配置：devServer.historyApiFallback 和 output.publicPath

Question

最近我遇到了与post "historyApiFallback doesn't work in Webpack dev server" 相同的问题。

---

我将首先在该帖子中引用接受的答案。

答案：

我今天遇到了同样的问题。让 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'}） 但不知何故它不起作用。

经过一番搜索，我找到了这个page。根据页面描述：

本部分适用于在开发中遇到此问题的每个人 使用 webpack-dev-server.. 就像上面一样，我们需要做什么告诉 Webpack Dev Sever 将所有服务器请求重定向到 /index.html。 您需要设置 webpack 配置中的两个属性 为此，请使用 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 修改为/。

我的 webpack 配置：

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 我相信）？

对不起，如果它有点乏味。我只是想提供一些细节。

Answer 1

但我不知道为什么它会起作用。

设置 1
在webpack.config.js设置中

output: {
  ...
  publicPath: '/static1/',
    },

告诉 webpack 将 '/static1/' 嵌入到生成的 .html 文件中的包路径中：

<script src="/static1/<name>.bundle.js" type="text/javascript"></script>

您可以在磁盘上打开生成的 .html 文件并查看上面带有 '/static1/' 的标记。

设置 2
此设置：

devServer: {
   publicPath: '/static/',      // different from 'static1' we used above

告诉 webpack-dev-server 为路径 /static 创建一个路由处理程序并提供资源，例如/static/<name>.bundle.js。 webpack-dev-server 基于 Express，它使用路由处理程序，例如app.use(/mypath, ...); 处理请求。

如果现在您将浏览器指向localhost:8080，您将看到空白屏幕。右键单击它以查看页面源。您将看到上面的 <script>tag 使浏览器使用路径 /static1/xxx 对 bundle 发出 GET 请求，这不起作用，因为您没有告诉 webpack-dev-server 为该路径创建路由处理程序。现在在浏览器导航栏中输入 http://localhost:8080/static/<name>.bundle.js 你会看到你的包的内部结构。

消除static1 和static 之间的差异，页面将呈现。在您的情况下，它可以工作，因为一个设置明确设置为'/'，而第二个默认设置为相同的值。

设置 3
historyApiFallback 的范围比其他两个设置更窄，因为它仅用于 SPA。在初始渲染期间，用户会看到 SPA 的登录页面，例如/mysample.html。这是上面显示的带有<script> 标签的文件。它应该在没有任何路径的情况下使用，例如 /static 前缀：

historyApiFallback: {
  ...
  index: mysample.html,

因为 Setting1 和 Setting2 适用于捆绑包，而不适用于包含捆绑包的 .html 页面。

Answer 2

遇到同样的问题，成功解决了，指定了route，而不是index.html的路径

devServer: {
  publicPath: `/myApp`,
  historyApiFallback: {
    rewrites: [
      { from: /\/myApp/, to: `/myApp` }
    ]
  }
}