当我直接输入URL时，浏览器找不到文件(由webpack导出)

Question

我有一个React网页，有以下路线：

localhost:8000/
localhost:8000/login
localhost:8000/auth/callback
localhost:8000/about/me

js显示了一些按钮，这样我就可以访问4条路线中的每一条。它运行良好。但问题是：当我在浏览器的地址栏中输入AboutMe页面的URL时，我会收到下面的错误。当我在Login页面上使用OAuth时，我希望重定向到的回调也是如此。

错误消息(此处：将AboutMe页面直接输入地址栏(：

me:1 Refused to apply style from 'http://localhost:8000/about/woff.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
me:14 GET http://localhost:8000/about/main.bundle.min.js net::ERR_ABORTED 404 (Not Found)

问题：

• 如果我直接输入AboutMe页面的URL，浏览器会找到dist/index.html吗？

  完全是的，因为它试图加载woff.css和bundle.js。这些导入是通过webpack注入HTML的。

• 为什么要在新路径中查找样式表和脚本
• 为什么react路由器没有启动

---

这是我的webpack.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const GoogleFontsPlugin = require('google-fonts-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: './src/bootstrap/index.tsx',
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.less']
},
output: {
path: path.join(__dirname, '/dist'),
library: 'my-library-react', // Important
libraryTarget: 'umd', // Important
filename: '[name].bundle.min.js'
},
module: {
rules: [
{
test: /.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'less-loader',
options: {
modifyVars: {
hack: `true; @import "${__dirname}/src/theme/custom-theme.less";`
},
javascriptEnabled: true
}
}
]
},
{
test: /.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
]
},
plugins: [
new Dotenv(),
new HtmlWebpackPlugin({
template: './src/bootstrap/index.html',
filename: 'index.html', // destination
}),
new GoogleFontsPlugin('./src/theme/fonts.config.json')
]
};

Answer 1

在webpack.config.js中，必须应用以下更改：

// ...
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: '.bundle.js'
// ...
},
devServer: {
historyApiFallback: {
index: '/'
}
}
// ...
}