react js应用程序包括webpack,并且historyApiFallback设置为true,但是它是 在服务器中部署后无法正常工作。 刷新页面后,我得到404,但没有实际的组件。 以下是我的web.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
https: true,
index: 'index.html',
historyApiFallback: true,
contentBase: './dist',
hot: true,
publicPath: '/',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'public/index.html',
title: 'Finexus'
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.png$/, use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}]},
{
test: /\.jpg$/, use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}] },
]
},
};
我有一个index.html,bundle.js和一个图像文件夹。
请对此提供帮助。