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

问题描述

我正在使用Webpack（v.4.44.2）和Vagrant进行React / Typescript项目。出于路由目的，我尝试从react-router-dom实现浏览器历史记录。可以想象，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',{ test: /\.css?$/i,use: ['style-loader',MiniCssExtractPlugin.loader,'css-loader'],{
        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,// 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

你有什么主意吗？

解决方法

问题解决如下

流浪者设置：

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',{ test: /\.css?$/i,use: ['style-loader',MiniCssExtractPlugin.loader,'css-loader'],{
        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,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
    }
  }
};

没有与文件系统或流浪者有关的棘手东西。只是我没有注意到的网址“点”问题-__-“