Webpack 开发服务器登陆应用时返回 404

Question

Webpack dev server returns 404 when landing not to index page.

Problem is when landing example to localhost:8080/page app request bundle.js from http://localhost:8080/page/bundle.js?08386a6ab2de89169893 and then return 404

When try request from index http://localhost:8080/bundle.js?08386a6ab2de89169893 dev-server returns 200

my webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default

const styledComponentsTransformer = createStyledComponentsTransformer()

const basePath = __dirname

module.exports = function(env, arg) {
  const base = {
    context: path.join(basePath, 'src'),
    entry: ['./index.tsx'],
    output: {
      path: path.join(basePath, 'dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader',
        },
        {
          test: /\.tsx?$/,
          loader: 'awesome-typescript-loader',
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            getCustomTransformers: () => ({
              before: [styledComponentsTransformer],
            }),
          },
        },
        {
          test: /\.js$/,
          use: ['source-map-loader'],
          enforce: 'pre',
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.mjs', '.tsx', '.ts', '.js'],
      alias: {
        react: path.resolve(__dirname, 'node_modules', 'react'),
        '~': path.resolve('./src'),
      },
    },
    devtool: 'source-map',
    externals: {
      React: 'react',
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      inline: true,
      compress: true,
      historyApiFallback: true,
      proxy: {
        '/graphql': {
          secure: false,
          target: 'http://gepick.com:4002/graphql',
          changeOrigin: true,
        },
        '/predict': {
          secure: false,
          target: 'http://localhost:5000',
          changeOrigin: true,
        },
      },
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html', //Name of file in ./dist/
        template: 'index.html', //Name of template in ./src
        hash: true,
      }),
    ],
  }

  return base
}

Answer 1

I added publicPath: '/' to output

    output: {
      path: path.join(basePath, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },

now it`s works as expect