finish setting webpack

2024-02-21 03:17:36 +03:00 · 2024-02-21 03:17:36 +03:00 · f9ed0cd04f
commit f9ed0cd04f
parent bbc08b1e63
22 changed files with 349 additions and 27 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 dist/
-node_modules/
+node_modules/
+package-lock.json
--- a/index.js
+++ b/index.js
@ -1 +0,0 @@
-import './style.scss'
--- a/module.js
+++ b/module.js
--- a/package.json
+++ b/package.json
@ -4,20 +4,34 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "build": "npx webpack --mode production",
-    "start": "npx webpack-dev-server --mode development"
+    "build:dev": "npx webpack --env mode=development",
+    "build:prod": "npx webpack --env mode=production",
+    "start": "npx webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "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",
    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.8.0",
    "sass": "^1.71.0",
    "sass-loader": "^14.1.0",
    "style-loader": "^3.3.4",
    "webpack": "^5.90.2",
    "webpack-cli": "^5.1.4",
    "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"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/App.jsx
+++ b/src/App.jsx
@ -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;
--- a/src/assets/styles/app.module.scss
+++ b/src/assets/styles/app.module.scss
@ -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%;
+}
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@ -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; }
--- a/src/assets/styles/components/myButton.module.scss
+++ b/src/assets/styles/components/myButton.module.scss
@ -0,0 +1,6 @@
+.main {
+    button {
+        font-size: 15px;
+        padding: 10%;
+    }
+}
--- a/src/assets/styles/components/myInput.module.scss
+++ b/src/assets/styles/components/myInput.module.scss
@ -0,0 +1,5 @@
+.main {
+    input {
+        
+    }
+}
--- a/src/assets/styles/components/navbar.module.scss
+++ b/src/assets/styles/components/navbar.module.scss
@ -0,0 +1,9 @@
+.main {
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+}
--- a/src/assets/styles/forms.module.scss
+++ b/src/assets/styles/forms.module.scss
@ -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 {
+
+}
--- a/src/components/MyButton.jsx
+++ b/src/components/MyButton.jsx
@ -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;
--- a/src/components/MyInput.jsx
+++ b/src/components/MyInput.jsx
@ -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;
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@ -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;
--- a/src/index.js
+++ b/src/index.js
@ -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/>
+);
--- a/src/pages/Forms.jsx
+++ b/src/pages/Forms.jsx
@ -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;
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -0,0 +1,11 @@
+import React from "react";
+
+const Home = () => {
+    return (
+        <div>
+            <span>Home</span>
+        </div>
+    )
+}
+
+export default Home;
--- a/src/pages/NewForm.jsx
+++ b/src/pages/NewForm.jsx
@ -0,0 +1,11 @@
+import React from "react";
+
+const NewForm = () => {
+    return (
+        <div>
+            NEW
+        </div>
+    )
+}
+
+export default NewForm;
--- a/src/router/router.js
+++ b/src/router/router.js
@ -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
--- a/style.scss
+++ b/style.scss
@ -1,3 +0,0 @@
-body {
-    background-color: blue;
-}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,23 +1,67 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');

-module.exports = {
-    entry: './index.js',
-    output: {
-        filename: 'bundle.js',
-        path: path.resolve(__dirname, 'dist'),
-        clean: true
-    },
-    plugins: [new HtmlWebpackPlugin()],
-    module: {
-        rules: [
-            {
-                test: /\.(scss|css)$/,
-                use: ['style-loader', 'css-loader', 'sass-loader'],
-            }
-        ]
-    },
-    devServer: {
-        port: 3000
+module.exports = (env) => {
+
+    const isDev = env.mode === 'development';
+    console.log(env.mode ?? 'development', isDev ? 'style-loader' : 'Mini')
+
+    const cssLoader = {
+        loader: "css-loader",
+        options: {
+            modules: {
+                localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
+            },           
+        },
    }
+
+    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
 }