如何使 Webpack-dev-server 与 Vagrant 中的 react-router 一起工作？

Question

我正在使用 Webpack (v.4.44.2) 和 Vagrant 开发一个 React / Typescript 项目。出于路由目的，我尝试从 react-router-dom 实现 BrowserHistory。可以想象，http://localhost:8000/myUrl 此时在刷新/手动输入时无法正常工作。经过一番研究，我尝试设置devServer.historyApiFallback和output.publicPath，但没有成功。

我的 webpack 设置如下所示：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './src/index.tsx',
  target: 'web',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // `.js` for external libs (/node_modules/)
  },
  module: {
    rules: [
      { test: /\.tsx?$/i, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.tsx?$/i, use: 'prettier-loader', enforce: 'pre', exclude: /node_modules/ },
      { test: /\.css?$/i, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'], exclude: /node_modules/ },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') }),
    new MiniCssExtractPlugin({ filename: 'main.css' })
  ],
  devServer: {
    compress: true,
    historyApiFallback: {
      index: path.join(__dirname, 'dist'),
      // index: '/',
    },
    // historyApiFallback: true,
    host: '0.0.0.0',
    public: '10.10.10.61',
    port: 8000,
    watchOptions: {
      poll: true
    }
  }
};

如您所见，我为historyApiFallback 尝试了几个值，但我觉得我遗漏了一些东西，因为我在刷新时仍然出现 404 错误。当我在 Vagrant 中时，我想知道这是否是关于开发包未写入磁盘这一事实的问题？或者可能与 Vagrant 网络设置有关？

我的 Vagrantfile 如下：

Vagrant.configure(2) do |config|
  # see https://webpack.js.org/guides/development-vagrant/
  config.vm.network :private_network, ip: "10.10.10.61"

  config.ssh.insert_key = false
  config.vm.define "dev", primary: true do |app|
    app.vm.provider "docker" do |d|
      d.image = "someImage"

      d.name = "#{PROJECT}_dev"

      d.has_ssh = true
      d.ports = ["0.0.0.0:8000:8000"]
      d.env = DOCKER_ENV
    end
    [...]
  end
end

你有什么想法吗？

Answer 1

问题解决如下

流浪设置：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './src/index.tsx',
  target: 'web',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // `.js` for external libs (/node_modules/)
  },
  module: {
    rules: [
      { test: /\.tsx?$/i, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.tsx?$/i, use: 'prettier-loader', enforce: 'pre', exclude: /node_modules/ },
      { test: /\.css?$/i, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'], exclude: /node_modules/ },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
      filename: path.resolve(__dirname, 'dist', 'index.html')
    }),
    new MiniCssExtractPlugin({ filename: 'main.css' })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    compress: true,
    historyApiFallback: {
      disableDotRule: true, // this was what messed me up : in my URL, I have IDs, which for some reason contains dots
      index: '/', // same as output.publicPath
    },
    host: '0.0.0.0',
    public: '10.10.10.61',
    port: 8000,
    watchContentBase: true,
    watchOptions: {
      poll: true
    }
  }
};

没有与文件系统或 vagrant 相关的棘手问题。只是一个我没有注意到的 URL“点”问题-__-”