Добавление manifest и иконок
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
/node_modules
|
||||
/.vscode
|
||||
/build
|
||||
|
||||
6995
package-lock.json
generated
6995
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -4,7 +4,9 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "lite-server --baseDir=\"src\""
|
||||
"start": "webpack serve --mode=development",
|
||||
"dev": "webpack serve --mode=development --open=false",
|
||||
"build": "webpack --mode=production"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -18,7 +20,19 @@
|
||||
},
|
||||
"homepage": "https://github.com/vigdorov/examples-for-kids#readme",
|
||||
"devDependencies": {
|
||||
"lite-server": "^2.6.1"
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"favicons": "^6.2.0",
|
||||
"favicons-webpack-plugin": "^5.0.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.0.0",
|
||||
"mini-css-extract-plugin": "^1.3.5",
|
||||
"webpack": "^5.21.1",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"bootstrap": "^5.0.0-beta1"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/.DS_Store
vendored
Normal file
BIN
public/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/icon-512x512.png
Normal file
BIN
public/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@ -2,6 +2,24 @@
|
||||
<html lang="en" class="h-100">
|
||||
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Example for kids</title>
|
||||
@ -39,12 +57,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
10
public/manifest.json
Normal file
10
public/manifest.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "fullscreen",
|
||||
"scope": "/",
|
||||
"orientation": "portrait",
|
||||
"start_url": "/",
|
||||
"app_name": "Example for Kids",
|
||||
"short_name": "Example"
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
import 'bootstrap';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './style.css';
|
||||
// TODO скрыть переменные
|
||||
|
||||
const LOCAL_DATA_KEY = 'example-for-kids';
|
||||
|
||||
45
webpack.config.js
Normal file
45
webpack.config.js
Normal file
@ -0,0 +1,45 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
|
||||
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/script.js',
|
||||
output: {
|
||||
filename: 'main.js',
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
},
|
||||
devServer: {
|
||||
open: true,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './public/index.html',
|
||||
filename: 'index.html',
|
||||
favicon: './public/favicon.ico',
|
||||
}),
|
||||
new MiniCssExtractPlugin(),
|
||||
new FaviconsWebpackPlugin({
|
||||
logo: './public/icon-512x512.png',
|
||||
manifest: './public/manifest.json'
|
||||
}),
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user