webpack4兼容性中的历史api回退功能
我目前正面临一个奇怪的问题,我刚刚完成了从Webpack3中的应用程序到Webpack4的转换 我可以使用地址栏创建如下路径: $myapp/a/b或$myapp/a/b/c或$myapp/a/ 但一切都像: $myapp/a或$myapp/b工作正常 在应用程序中,我可以使用历史记录从第一个类别访问路径 我以这种方式启动我的应用程序: Web包开发服务器-模式开发-主机0.0.0.0-历史api回退 我的网页包配置如下所示:webpack4兼容性中的历史api回退功能,webpack,ecmascript-6,react-router,Webpack,Ecmascript 6,React Router,我目前正面临一个奇怪的问题,我刚刚完成了从Webpack3中的应用程序到Webpack4的转换 我可以使用地址栏创建如下路径: $myapp/a/b或$myapp/a/b/c或$myapp/a/ 但一切都像: $myapp/a或$myapp/b工作正常 在应用程序中,我可以使用历史记录从第一个类别访问路径 我以这种方式启动我的应用程序: Web包开发服务器-模式开发-主机0.0.0.0-历史api回退 我的网页包配置如下所示: /* eslint-disable */ const path =
/* eslint-disable */
const path = require('path')
const resolve = path.resolve
const DotenvPlugin = require('webpack-dotenv-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
includePaths: [__dirname]
}
}]
},
{ test: /\.css$/,
loader: "style-loader!css-loader",
include: __dirname
},
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg|png)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[hash].[ext]'
}
}
}
]
},
resolve: {
extensions: [".js"],
alias: {
["~"]: resolve(__dirname)
}
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new DotenvPlugin({
sample: './.env.sample',
path: './.env'
})
]
}
在浏览器中,我收到以下错误消息:
收到http://localhost:8081/path/main.js net::ERR_中止
d:1拒绝执行来自的脚本'http://localhost:8081/path/main.js'因为其MIME类型“text/html”不可执行,并且启用了严格的MIME类型检查
有人对此有想法吗?在输出中添加公共路径选项后解决,如下所示:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
publicPath: '/'
},