KRBL/MinervaFrontend
9
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

finish setting webpack

Browse Source
This commit is contained in:
kuwsh1n 2024-02-21 03:17:36 +03:00
parent bbc08b1e63
commit f9ed0cd04f
22 changed files with 349 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,2 +1,3 @@
dist/ dist/
node_modules/ node_modules/
package-lock.json

1
index.js
View File

@ -1 +0,0 @@
import './style.scss'

0
module.js
View File

18
package.json
View File

@ -4,20 +4,34 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "npx webpack --mode production", "build:dev": "npx webpack --env mode=development",
"start": "npx webpack-dev-server --mode development" "build:prod": "npx webpack --env mode=production",
"start": "npx webpack-dev-server"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"babel-loader": "^9.1.3",
"css-loader": "^6.10.0", "css-loader": "^6.10.0",
"html-webpack-plugin": "^5.6.0", "html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.8.0",
"sass": "^1.71.0", "sass": "^1.71.0",
"sass-loader": "^14.1.0", "sass-loader": "^14.1.0",
"style-loader": "^3.3.4", "style-loader": "^3.3.4",
"webpack": "^5.90.2", "webpack": "^5.90.2",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.2" "webpack-dev-server": "^5.0.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1"
} }
} }

11
public/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

22
src/App.jsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { RouterProvider } from "react-router-dom";
import router from "./router/router"
import classes from "./assets/styles/app.module.scss"
import NavBar from "./components/NavBar.jsx";
const App = () => {
return (
<div className={classes.main}>
<div className={classes.container}>
<div className={classes.header}>
<NavBar/>
</div>
<div className={classes.content}>
<RouterProvider router={router}/>
</div>
</div>
</div>
)
}
export default App;

23
src/assets/styles/app.module.scss Normal file
View File

@ -0,0 +1,23 @@
@import url('./base.css');
.main {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
.header {
background-color: rgb(240, 240, 240);
width: 100%;
height: 50px;
box-shadow: 0 0 5px 1px rgb(210, 210, 210);
}
.content {
width: 100%;
height: 90%;
}

57
src/assets/styles/base.css Normal file
View File

@ -0,0 +1,57 @@
* {
padding: 0;
margin: 0;
border: 0; }
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
:focus, :active {
outline: none; }
a:focus, a:active {
outline: none; }
nav, footer, header, aside {
display: block; }
html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
input, button, textarea {
font-family: inherit; }
input::-ms-clear {
display: none; }
button {
cursor: pointer; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
a, a:visited {
text-decoration: none; }
a:hover {
text-decoration: none; }
ul li {
list-style: none; }
img {
vertical-align: top; }
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400; }

6
src/assets/styles/components/myButton.module.scss Normal file
View File

@ -0,0 +1,6 @@
.main {
button {
font-size: 15px;
padding: 10%;
}
}

5
src/assets/styles/components/myInput.module.scss Normal file
View File

@ -0,0 +1,5 @@
.main {
input {
}
}

9
src/assets/styles/components/navbar.module.scss Normal file
View File

@ -0,0 +1,9 @@
.main {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}

23
src/assets/styles/forms.module.scss Normal file
View File

@ -0,0 +1,23 @@
.main {
width: 100%;
height: 100%;
padding: 4% 8%;
}
.wrapper {
width: 100%;
height: 100%;
border: 1px solid red;
}
.panel {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.listForms {
}

12
src/components/MyButton.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import classes from "../assets/styles/components/myButton.module.scss"
const MyButton = () => {
return (
<div className={classes.main}>
<button type="button">Создать</button>
</div>
)
}
export default MyButton;

12
src/components/MyInput.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import classes from "../assets/styles/components/myInput.module.scss"
const MyInput = () => {
return (
<div className={classes.main}>
<input type="text" />
</div>
)
}
export default MyInput;

14
src/components/NavBar.jsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import classes from "../assets/styles/components/navbar.module.scss"
const NavBar = () => {
return (
<navbar className={classes.main}>
<div className={classes.wrapper}>
</div>
</navbar>
)
}
export default NavBar;

9
src/index.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App/>
);

20
src/pages/Forms.jsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import classes from "../assets/styles/forms.module.scss"
import MyButton from "../components/MyButton.jsx";
import MyInput from "../components/MyInput.jsx";
const Forms = () => {
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.panel}>
<MyInput/>
<MyButton/>
</div>
<div className={classes.listForms}></div>
</div>
</div>
)
}
export default Forms;

11
src/pages/Home.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const Home = () => {
return (
<div>
<span>Home</span>
</div>
)
}
export default Home;

11
src/pages/NewForm.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const NewForm = () => {
return (
<div>
NEW
</div>
)
}
export default NewForm;

22
src/router/router.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { createBrowserRouter } from "react-router-dom";
import Forms from '../pages/Forms.jsx';
import NewForm from '../pages/NewForm.jsx';
import Home from "../pages/Home.jsx";
const router = createBrowserRouter([
{
path: "/",
element: <Home/>,
},
{
path: "/forms",
element: <Forms/>,
},
{
path: '/new',
element: <NewForm/>
}
]);
export default router

3
style.scss
View File

@ -1,3 +0,0 @@
body {
background-color: blue;
}

84
webpack.config.js
View File

@ -1,23 +1,67 @@
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = { module.exports = (env) => {
entry: './index.js',
output: { const isDev = env.mode === 'development';
filename: 'bundle.js', console.log(env.mode ?? 'development', isDev ? 'style-loader' : 'Mini')
path: path.resolve(__dirname, 'dist'),
clean: true const cssLoader = {
}, loader: "css-loader",
plugins: [new HtmlWebpackPlugin()], options: {
module: { modules: {
rules: [ localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
{ },
test: /\.(scss|css)$/, },
use: ['style-loader', 'css-loader', 'sass-loader'],
}
]
},
devServer: {
port: 3000
} }
const config = {
mode: env.mode ?? 'development',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public', 'index.html')}),
isDev ? undefined : new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
})
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
cssLoader,
'sass-loader'
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
devServer: {
port: env.port ?? 3000,
open: true,
historyApiFallback: true
}
};
return config
} }