正如标题所建议的那样,我不能得到像这样的路线
<Route path="/events/:id" component={EventDetailRoute} />
要工作,并且正如我所读到的,index.html中的bundle必须是绝对的,但是我使用HtmlWebpackPlugin所以bundle作为相对路径注入。
我尝试将webpack的输出配置设置为:
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
但那也没用。
如果我尝试这条路线:* http://localhost:8080/events/7 *,我在尝试查找 * http://localhost:8080/events/index_bundle.js * 时出现404错误
这是我的webpack.config:
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
webpack = require('webpack');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: "/" + path.resolve('dist', 'build'),
filename: 'index_bundle.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
hot: true,
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: 'dashes',
localIdentName: '[name]__[local]'
}
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader?name=[name].[ext]&outputPath=fonts/',
}
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader?name=[name].[ext]&outputPath=assets/',
}
}
]
},
plugins: [
HtmlWebpackPluginConfig,
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
}
我正在使用webpack 3.1.0、webpack-dev-server 2.5.1和react-router-dom 4.1.1
2条答案
按热度按时间tvmytwxo1#
将
<base href="/" />
添加到index.html文件的head标记中a64a0gku2#
我尝试了
<base href="/" />
解决方案。它对我的捆绑文件有效,但对我的css无效。然后,我注意到了真实的的问题。我的两个路径都是相对的,所以重新加载导致它们加载在错误的路径上。解决方案
注意,非相对路径
/index.css
和/bundle.js
。之前,它们是./index.css
和./bundle.js
。