Javascript 网页包配置：devServer.historyApiFallback和output.publicPath

最近，我遇到了与前总统相同的问题

---

我将首先在那篇帖子中引用被接受的答案

答复:

今天我遇到了同样的问题。让webpack.config.js中的配置： output.publicPath必须等于devServer.historyApiFallback.index，并且 指出html文件路由。我的webpack dev服务器版本是1.10.1，运行良好。不起作用，您必须指出html文件路径

---

我试图用这个答案来解决这个问题（设置

output.publicPath:'dist'

和

devServer.historyapi回退：{index:'dist/index.html'}

） 但不知怎么的，它没有起作用

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

本节面向在开发过程中遇到此问题的每个人 正在使用Web包开发服务器。。正如上面所说，我们需要做什么告诉你 Webpack Dev server将所有服务器请求重定向到/index.html。 在你的网页配置中，你只需要设置两个属性 为此，publicPath和HistoryApi需要后退

---

根据配置，我将我的

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()
  ],
}

现在一切似乎都正常了

但是我有一个难题，我不知道它为什么会起作用

---

具体地说

devServer.historyApiFallback:true

根据，这一点很清楚，所以我对这一部分并不怀疑

然而，

output.publicPath://

对我来说非常模糊

问题:

如果我尝试使用类似于

output.publicPath:/public

的东西，它 这是行不通的。那么为什么我必须在这里使用

output.publicPath://

如何

output.publicPath://

告诉webpack devserver查找 正确放置并服务器正确的

index.html

（由 我相信是devserver吗

---

如果有点乏味的话。我只想提供一些细节。

面对同样的问题，它成功地解决了，指定了

路线

，而不是

index.html的路径

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

但我有一个困惑，我不知道为什么它会起作用

设置1
在

webpack.config.js中

设置

输出：{
...
publicPath:“/static1/”，
},

告诉webpack将

'/static1/'

嵌入生成的.html文件中捆绑包的路径中：

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

告诉webpack开发服务器为路径

/static

创建路由处理程序，并提供资源，例如

/static/.bundle.js

。webpack dev服务器基于Express，它使用路由处理程序，例如，

app.use（/mypath，…）为请求提供服务

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

消除
static1
和
static
之间的差异，页面将呈现。在您的情况下，这是因为一个设置显式设置为
“/”
，而第二个设置默认为相同的值

设置3

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

historyapi回退：{
...
索引：mysample.html，

因为设置1和设置2适用于捆绑包，而不是包含.html页面的捆绑包。
谢谢您的提问和回答
devServer: {
  publicPath: `/myApp`,
  historyApiFallback: {
    rewrites: [
      { from: /\/myApp/, to: `/myApp` }
    ]
  }
}

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