Question

我不使用create-react-app来构建React应用程序，而是使用webpack来构建它，而使用webpack-dev-server来为其服务。

我的目录结构是：

myApp
|
|---docs/
|   |
|   |---dist/
|   |   |
|   |   |---bundle.js
|   |---index.html
|---src/
|---package.json
|---package-lock.json
|---README.md
|---webpack.config.js

和我的 webpack.config.js 是：

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/docs/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: [/.css$|.scss$/],
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|jpg|gif)$/,
        loader: 'file-loader?limit=10000&name=../assets/images/[name].[ext]'
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000&name=../assets/fonts/[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    contentBase: './docs',
    compress: true,
    port: 9000,
    historyApiFallback: true
  }
};

关于historyApiFallback的Webpack documentation说，此配置historyApiFallback: true会将所有404响应重定向到index.html。

碰巧我正在使用react-router-dom并且有以下路线：

<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Homepage} />
        <Route path="/about" component={About} />
        <Route path="/article/:id/show" component={Article} />
        <Route path="/donate" component={Donate} />
    </Switch>
</BrowserRouter>

使用/，/about和/donate一切都很好，但是当尝试使用路由/article/<something>/show时，仍然收到404错误消息，如下图所示。

它说找不到bundle.js文件。但是，这首先没有将我的路线重定向到index.html。如果这样做，它将找到bundle.js文件，就像在其他路由中一样。

我该怎么做？

编辑

按照建议将publicPath设置为/并不能解决问题。首先，/不是我的资产。

将其设置为/docs/dist（我的真实公共资产的路径）在某种程度上可以正常工作。但是，只有在加载资源时使用绝对路径时，解决方案才会出现。

Answer 1

您需要像这样在publicPath对象中指定output：

    output: {
        filename: 'bundle.js',
        path: __dirname + '/docs/dist',
        publicPath: '/'
    },

您可以阅读doc以获得更多见识。

React + Webpack：无法将我的所有路由重定向到index.html

1 个答案: