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

一切似乎都可以正常工作。

但是我感到困惑的是，我不知道它为什么起作用。

具体来说

devServer.historyApiFallback: true很清楚，所以我对该部分毫无疑问。
output.publicPath:/对我来说还是很模糊的。

问题：

如果我尝试使用类似output.publicPath:/public的名称，不管用。那为什么我必须在这里使用output.publicPath:/？
output.publicPath:/如何告诉webpack-devserver查找在正确的位置，并在服务器上使用正确的index.html（由我相信devserver）？

抱歉，这有点乏味。我只想提供一些细节。

Answer 1

面对相同的问题，它成功地解决了，它指定了route，而不是指向index.html的路径

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

Answer 2

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

设置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>标签，该标签使浏览器使用路径/static1/xxx发出对捆绑包的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,

因为设置1和设置2适用于包，而不适用于包含包的.html页面。

Webpack配置：devServer.historyApiFallback和output.publicPath

2 个答案: