ReactおよびWebpackを使用してファビコンを追加する
Webpackを使用して作成したReactベースのWebサイトにファビコンを追加しようとしています。ファビコンを追加するのは完全に悪夢であり、私は役に立たない多くの解決策を試みました。私に推奨されている最新のソリューションは、「favicons-webpack-plugin」と呼ばれます。これは、ここで見つけることができます： https://github.com/jantimon/favicons-webpack-plugin 。
誰かが私が間違っていることを私に伝えることができるなら、あなたの援助は大歓迎です。
「npm run start」を実行すると、次のエラーが表示されます
これは私のディレクトリ構造です：
これは私のwebpack.config.jsファイルです：
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var favicons = require('favicons'),
source = 'my-logo.png', // Source image(s). `string`, `buffer` or array of `{ size: filepath }`
configuration = {
appName: null, // Your application's name. `string`
appDescription: null, // Your application's description. `string`
developerName: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
background: "#fff", // Background colour for flattened icons. `string`
path: "/", // Path for overriding default icons path. `string`
url: "/", // Absolute URL for OpenGraph image. `string`
display: "standalone", // Android display: "browser" or "standalone". `string`
orientation: "portrait", // Android orientation: "portrait" or "landscape". `string`
version: "1.0", // Your application's version number. `number`
logging: false, // Print logs to console? `boolean`
online: false, // Use RealFaviconGenerator to create favicons? `boolean`
icons: {
Android: true, // Create Android homescreen icon. `boolean`
appleIcon: true, // Create Apple touch icons. `boolean`
appleStartup: true, // Create Apple startup images. `boolean`
coast: true, // Create Opera Coast icon. `boolean`
favicons: true, // Create regular favicons. `boolean`
firefox: true, // Create Firefox OS icons. `boolean`
opengraph: true, // Create Facebook OpenGraph image. `boolean`
Twitter: true, // Create Twitter Summary Card image. `boolean`
windows: true, // Create Windows 8 tile icons. `boolean`
yandex: true // Create Yandex browser icon. `boolean`
}
},
callback = function (error, response) {
if (error) {
console.log(error.status); // HTTP error code (e.g. `200`) or `null`
console.log(error.name); // Error name e.g. "API Error"
console.log(error.message); // Error description e.g. "An unknown error has occurred"
}
console.log(response.images); // Array of { name: string, contents: <buffer> }
console.log(response.files); // Array of { name: string, contents: <string> }
console.log(response.html); // Array of strings (html elements)
};
favicons(source, configuration, callback);
const pkg = require('./package.json');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: {
app: PATHS.app
},
// Add resolve.extensions
// '' is needed to allow imports without an extension
// note the .'s before the extension as it will fail to load without them
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
// Test expects a RegExp! Notethe slashes!
test: /\.css$/,
loaders: ['style', 'css'],
//Include accepts either a path or an array of paths
include: PATHS.app
},
//set up JSX. This accepts js too thanks to RegExp
{
test: /\.(js|jsx)$/,
//enable caching for improved performance during development
//It uses default OS directory by default. If you need something more custom,
//pass a path to it. ie: babel?cacheDirectory=<path>
loaders: [
'babel?cacheDirectory,presets[]=es2015'
],
//parse only app files Without this it will go thru the entire project.
//beside being slow this will likely result in an error
include: PATHS.app
}
]
}
};
// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
//enable history API fallback so HTML5 HISTORY API based
// routing works. This is a good default that will come in handy in more
// complicated setups.
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
//display only errors to reduce output amount
stats: 'errors only',
//Parse Host and port from env so this is easy to customize
Host: process.env.Host,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true //--save
}),
new FaviconsWebpackPlugin('my-logo.png')
]
});
}
if(TARGET === 'build' || TARGET === 'stats') {
module.exports = merge(common, {
entry: {
vendor: Object.keys(pkg.dependencies).filter(function(v) {
return v !== 'alt-utils';
}),
style: PATHS.style
},
output: {
path: PATHS.build,
// Output using entry name
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
},
module: {
loaders: [
// Extract CSS during build
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: PATHS.app
}
]
},
plugins: [
// Output extracted CSS to a file
new ExtractTextPlugin('[name].[chunkhash].css'),
// Extract vendor and manifest files
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
// Setting DefinePlugin affects React library size!
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
});
}
これは私のserver.jsファイルです：
/* Global Requires */
const express = require('express');
const logger = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const ReactDOM = require('react-dom')
var favicon = require('serve-favicon');
if(process.env.NODE_ENV === 'development') {
console.log('in development.');
require('dotenv').config();
} else {
console.log('in production.');
}
/* App Config */
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
/* Server Initialization */
app.get('/', (req, res) => res.sendFile('index.html'));
var port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server initialized on // ${new Date()}`));
必要なものはすべてここにあります：
new HtmlWebpackPlugin({
favicon: "./src/favicon.gif"
})
これは、「src」フォルダに「favicon.gif」を追加した後です。
これにより、アイコンがビルドフォルダーに転送され、_<link rel="shortcut icon" href="favicon.gif">のようにタグに含まれます。これは、単にcopyWebpackPLuginでインポートするよりも安全です
将来のGoogleユーザーの場合： copy-webpack-plugin を使用して、これをwebpackの本番環境設定に追加することもできます。
plugins: [
new CopyWebpackPlugin([
// relative path is from src
{ from: './static/favicon.ico' }, // <- your path to favicon
])
]
ファビコンを単にpublicフォルダーに追加するだけです。ファビコンの名前がfavicon.icoであることを確認してください。
ブラウザは/favicon.icoでファビコンを検索するので、そこにある必要があります。 [address:port]/favicon.icoに移動し、アイコンが表示されるかどうかを確認して、正しい場所に配置したかどうかを再確認できます。
開発モードでは、historyApiFallbackを使用しているため、そのルートのアイコンを明示的に返すようにwebpackを構成する必要があります。
historyApiFallback: {
index: '[path/to/index]',
rewrites: [
// shows favicon
{ from: /favicon.ico/, to: '[path/to/favicon]' }
]
}
server.jsファイルで、URLを明示的に書き換えてみてください。
app.configure(function() {
app.use('/favicon.ico', express.static(__dirname + '[route/to/favicon]'));
});
（または、しかし、あなたのセットアップはURLを書き換えることを好みます）
ブラウザ間で信頼性が高いことがわかったため、.icoを使用するのではなく、真の.pngファイルを生成することをお勧めします。
別の選択肢は
npm install react-favicon
そして、あなたのアプリケーションであなたはただやるでしょう：
import Favicon from 'react-favicon';
//other codes
ReactDOM.render(
<div>
<Favicon url="/path/to/favicon.ico"/>
// do other stuff here
</div>
, document.querySelector('.react'));
ここに私がやった方法があります。
public/index.html
生成されたファビコンリンクを追加しました。
...
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/path/to/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/path/to/favicon-16x16.png" />
<link rel="shortcut icon" href="%PUBLIC_URL%/path/to/favicon.ico" type="image/png/ico" />
webpack.config.js
new HTMLWebpackPlugin({
template: '/path/to/index.html',
favicon: '/path/to/favicon.ico',
})
注意
私はhistoryApiFallbackを開発モードで使用していますが、ファビコンを機能させるためにサーバー側で追加のセットアップを行う必要はありませんでした。
他の外部スクリプトまたはスタイルシートを追加するのと同じです。あなたがしなければならないのは、正しいパスとrelとタイプを与えることに集中することです。
注：私のファビコン画像がassets folderにあったとき、それはファビコンを表示していませんでした。だからindex.htmlと同じフォルダーに画像をコピーして、それは完全に機能しました。
<head>
<link rel="shortcut icon" type="image/png/ico" href="/favicon.png" />
<title>SITE NAME</title>
</head>
それは私のために働いた。それがあなたにも役立つことを願っています。
ファビコンを追加する簡単な手順を説明します:-)
- ロゴを作成し、
logo.pngとして保存します logo.pngをfavicon.icoに変更します注：保存するときは
favicon.ico_favicon.ico.pngではないことを確認してください更新には時間がかかる場合があります
待つことができない場合は、manifest.jsonでアイコンのサイズを変更します
そのためにfile-loaderを使用します。
{
test: /\.(svg|png|gif|jpg|ico)$/,
include: path.resolve(__dirname, path),
use: {
loader: 'file-loader',
options: {
context: 'src/assets',
name: 'root[path][name].[ext]'
}
}
}
私の場合-Visual Studio（Professional 2017）をデバッグモードでwebpack 2.4.1で実行しています-favicon.icoをプロジェクトのルートディレクトリに配置する必要がありました。フォルダーsrcはむしろ https://create-react-app.dev/docs/using-the-public-folder によるとはいえ、フォルダーpublic内よりも後者は公式の場所でなければなりません。