리액트 및 웹 팩을 사용하여 Favicon 추가
웹팩으로 만든 리액트 기반의 웹사이트에 favicon을 추가하려고 합니다.favicon을 추가하는 것은 완전히 악몽이었고 나는 많은 해결책을 시도했지만 소용이 없었다.나에게 추천된 최신 솔루션은 'httpons-webpack-http://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
만 하면 .public
폴더면 됩니다.이 favicon으로 합니다.favicon.ico
.
미래의 구글 사용자:copy-webpack-plugin을 사용하여 웹 팩의 프로덕션 구성에 추가할 수도 있습니다.
plugins: [
new CopyWebpackPlugin({
patterns: [
// relative path is from src
{ from: './static/favicon.ico' }, // <- your path to favicon
]
})
]
내가 한 일은 이렇다.
public/index.displaces
생성된 favicon 링크를 추가했습니다.
...
<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.syslog
new HTMLWebpackPlugin({
template: '/path/to/index.html',
favicon: '/path/to/favicon.ico',
})
메모
용 i i i i를 쓴다.historyApiFallback
dev 모드이지만 favicon 작업이나 서버 측에서 추가 설정을 할 필요가 없었습니다.
또 다른 대안은
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'));
정답:
웹 팩을 직접 사용하는 경우:
new HtmlWebpackPlugin({
favicon: "./public/fav-icon.ico"
})
CRA(create-react-app)를 할 수 .manifest.json
directory( 디렉토리)에 .
는 라라 in in in in in in in in in in in in에서 를 찾습니다./favicon.ico
그게 필요한 부분이에요. 한 번 하실 수 .[address:port]/favicon.ico
아이콘이 표시되는지 확인합니다.
개발 모드에서는 historyApiFallback을 사용하기 때문에 해당 루트의 아이콘을 명시적으로 반환하도록 웹 팩을 설정해야 합니다.
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
브라우저 전체에서 신뢰성이 더 높다는 것을 알게 되었기 때문입니다.
다른 외부 스크립트나 스타일시트를 추가하는 것과 같습니다.올바른 경로와 rel 및 입력에 집중하기만 하면 됩니다.
메모: 애셋 폴더에 favicon 이미지가 있을 때는 favicon이 표시되지 않았습니다.그래서 이미지를 index.html과 같은 폴더에 복사했더니 정상적으로 동작했습니다.
<head>
<link rel="shortcut icon" type="image/png/ico" href="/favicon.png" />
<title>SITE NAME</title>
</head>
그것은 나에게 효과가 있었다.당신에게도 효과가 있기를 바랍니다.
favicon-webpack-plugin을 사용합니다.
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
module.exports={
plugins:[
new FaviconsWebpackPlugin("./public/favicon.ico"),
//public is in the root folder in this app.
]
}
공용 폴더에 있는 favicon.ico를 자신의 폴더로 바꾸면 작업이 시작됩니다.
파일 로더를 사용합니다.
{
test: /\.(svg|png|gif|jpg|ico)$/,
include: path.resolve(__dirname, path),
use: {
loader: 'file-loader',
options: {
context: 'src/assets',
name: 'root[path][name].[ext]'
}
}
}
favicon을 추가할 수 있는 간단한 절차를 알려드리겠습니다:-)
- 로고를 만들고 다음 이름으로 저장하세요.
logo.png
바꾸다
logo.png
로.favicon.ico
주의: 저장 시:
favicon.ico
확실히 하다favicon.ico.png
업데이트에 시간이 걸릴 수 있습니다.
기다릴 수 없는 경우 manifest.json의 아이콘 크기를 변경
이건 나한테 효과가 있었어.다음 추가index.html
(favicon.ico와 함께 src 폴더 추가)
<link rel="icon" href="/src/favicon.ico" type="image/x-icon" />
이내에webpack.config.js
플러그인에 추가
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
제 경우 -- 저는 Visual Studio(Professional 2017)를 웹팩 2.4.1과 함께 디버깅모드로 실행하고 있습니다 -- 이 경우 visual Studio (Professional 2017)를favicon.ico
프로젝트의 루트 디렉토리로 이동합니다.폴더가 있는 곳src
폴더에 있는 것이 아니라public
https://create-create-buffic-app.dev/using-the-public-folder에 따르면 후자가 공식 위치여야 합니다.
Ctrl+f5
브라우저 캐시 지우기
아직 찾고 계신 분들을 위해...한번 실행한 후 index.html의 favicon을 Import 할 수 있었습니다.
npm install html-loader
그리고 다음 내용도 포함시켰습니다.webpack.config.js
:
// ... Other config options.
{
test: /\.html$/,
include: path.resolve(__dirname, 'public'), // Your path may be different.
use: [
{
loader: 'html-loader',
},
],
},
파일 경로는 프로덕션 코드가 아니라 소스 코드를 기준으로 해야 합니다.빌드에 favicon이 포함되어 있는지 여부를 확인하려면 다음과 같이 URL에서 생산 경로를 검색할 수 있습니다.localhost:xxxxx/path/to/favicon.png
CopyWebPackPlugin과 HtmlWebPackPlugin에 대한 답변은 둘 다 적절하다고 생각합니다.
단, 다음 두 가지 사항에 유의할 필요가 있습니다.
Copy WebPackin은 "커뮤니티 구성원에 의해 유지되는 서드파티 패키지로 웹팩과 동일한 지원, 보안 정책 또는 라이선스를 잠재적으로 가지고 있지 않으며 웹팩에 의해 유지되지 않습니다." - 따라서 안전성이 떨어진다는 의견이 있는 것입니다.
CopyWebpackPlugin을 사용하면 출력 폴더를 지정할 수 있다는 장점이 있습니다(예: /public/images - 그러면 즐겨찾기 아이콘이 dist/public/images에 배치되고 HTML 파일이 거기에 액세스 할 수 있습니다).HtmlWebPackPlugin은 favicon을 dist 폴더의 루트에 배치하기 때문에 dist 폴더 구조화 방법에 대한 입력에 유연성이 떨어집니다.
언급URL : https://stackoverflow.com/questions/37298215/add-favicon-with-react-and-webpack
'source' 카테고리의 다른 글
치명적 오류: 의 '루프' 또는 '스위치' 컨텍스트에 '브레이크'가 없습니다. (0) | 2023.04.02 |
---|---|
AngularJS - ng-repeat으로 커스텀필터를 구조화하여 아이템을 조건부로 반환하는 방법 (0) | 2023.04.02 |
HTTP 요구가 상태 코드0을 반환하는 것은 무엇을 의미합니까? (0) | 2023.04.02 |
Jest를 사용한 새로운 리액트라우터 후크를 사용한history.push의 모의 방법 (0) | 2023.04.02 |
Angular 4 HttpClient 쿼리 파라미터 (0) | 2023.04.02 |