我有一个 React/Redux 应用程序,我正在使用 webpack 来转译我的 JSX 和 ES6,并将我的样式表和图像加载到我的 JS 中。我的开发服务器托管在端口 3000 上。
这是我的webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
favicon: 'src/images/favicon.ico'
})
],
module: {
loaders: [{
test: /.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /.less?$/,
loaders: [ 'style', 'css', 'less' ],
include: __dirname
},
{
test: /.(otf|eot|svg|ttf|woff|woff2)(?v=[0-9].[0-9].[0-9])?$/,
loaders: [ 'url' ],
include: __dirname
},
{
test: /.(png|ico|gif)?$/,
loaders: [ 'file' ],
include: __dirname
}]
}
};
当我点击 localhost:3000 时,除了我的网站图标之外,我期望在那里的所有东西都在那里。如果我去localhost:3000/static/favicon.ico,我的网站图标就在那里。可以使用一些专业知识来调试此问题。
浏览器将在 localhost:3000/favicon.ico
中查找您的图标,所以这就是它需要的地方。尝试重写网址,以便为/favicon.ico
路由提供favicon.ico
。例如,如果您使用的是 historyApiFallback,请执行以下操作:
historyApiFallback: {
rewrites: [
// shows favicon
{ from: /favicon.ico/, to: '[path/to/favicon]' }
]
}