From f9ed0cd04f60dafe6f2ba73c9690788dd517368f Mon Sep 17 00:00:00 2001 From: kuwsh1n Date: Wed, 21 Feb 2024 03:17:36 +0300 Subject: [PATCH] finish setting webpack --- .gitignore | 3 +- index.js | 1 - module.js | 0 package.json | 18 +++- public/index.html | 11 +++ src/App.jsx | 22 +++++ src/assets/styles/app.module.scss | 23 +++++ src/assets/styles/base.css | 57 +++++++++++++ .../styles/components/myButton.module.scss | 6 ++ .../styles/components/myInput.module.scss | 5 ++ .../styles/components/navbar.module.scss | 9 ++ src/assets/styles/forms.module.scss | 23 +++++ src/components/MyButton.jsx | 12 +++ src/components/MyInput.jsx | 12 +++ src/components/NavBar.jsx | 14 ++++ src/index.js | 9 ++ src/pages/Forms.jsx | 20 +++++ src/pages/Home.jsx | 11 +++ src/pages/NewForm.jsx | 11 +++ src/router/router.js | 22 +++++ style.scss | 3 - webpack.config.js | 84 ++++++++++++++----- 22 files changed, 349 insertions(+), 27 deletions(-) delete mode 100644 index.js delete mode 100644 module.js create mode 100644 public/index.html create mode 100644 src/App.jsx create mode 100644 src/assets/styles/app.module.scss create mode 100644 src/assets/styles/base.css create mode 100644 src/assets/styles/components/myButton.module.scss create mode 100644 src/assets/styles/components/myInput.module.scss create mode 100644 src/assets/styles/components/navbar.module.scss create mode 100644 src/assets/styles/forms.module.scss create mode 100644 src/components/MyButton.jsx create mode 100644 src/components/MyInput.jsx create mode 100644 src/components/NavBar.jsx create mode 100644 src/index.js create mode 100644 src/pages/Forms.jsx create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/NewForm.jsx create mode 100644 src/router/router.js delete mode 100644 style.scss diff --git a/.gitignore b/.gitignore index 763301f..b465c25 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ dist/ -node_modules/ \ No newline at end of file +node_modules/ +package-lock.json \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 6a03d0c..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -import './style.scss' \ No newline at end of file diff --git a/module.js b/module.js deleted file mode 100644 index e69de29..0000000 diff --git a/package.json b/package.json index 14ce03e..73909f9 100644 --- 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" } } diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..c8712f8 --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + +
+ + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..7c4410e --- /dev/null +++ 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 ( +
+
+
+ +
+
+ +
+
+
+ ) +} + +export default App; \ No newline at end of file diff --git a/src/assets/styles/app.module.scss b/src/assets/styles/app.module.scss new file mode 100644 index 0000000..b576884 --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css new file mode 100644 index 0000000..e74ff02 --- /dev/null +++ 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; } \ No newline at end of file diff --git a/src/assets/styles/components/myButton.module.scss b/src/assets/styles/components/myButton.module.scss new file mode 100644 index 0000000..8d624d8 --- /dev/null +++ b/src/assets/styles/components/myButton.module.scss @@ -0,0 +1,6 @@ +.main { + button { + font-size: 15px; + padding: 10%; + } +} \ No newline at end of file diff --git a/src/assets/styles/components/myInput.module.scss b/src/assets/styles/components/myInput.module.scss new file mode 100644 index 0000000..7082a37 --- /dev/null +++ b/src/assets/styles/components/myInput.module.scss @@ -0,0 +1,5 @@ +.main { + input { + + } +} \ No newline at end of file diff --git a/src/assets/styles/components/navbar.module.scss b/src/assets/styles/components/navbar.module.scss new file mode 100644 index 0000000..2952fe9 --- /dev/null +++ b/src/assets/styles/components/navbar.module.scss @@ -0,0 +1,9 @@ +.main { + width: 100%; + height: 100%; +} + +.wrapper { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/assets/styles/forms.module.scss b/src/assets/styles/forms.module.scss new file mode 100644 index 0000000..38f1a42 --- /dev/null +++ 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 { + +} \ No newline at end of file diff --git a/src/components/MyButton.jsx b/src/components/MyButton.jsx new file mode 100644 index 0000000..7ca2e0b --- /dev/null +++ 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 ( +
+ +
+ ) +} + +export default MyButton; \ No newline at end of file diff --git a/src/components/MyInput.jsx b/src/components/MyInput.jsx new file mode 100644 index 0000000..4aef7f8 --- /dev/null +++ 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 ( +
+ +
+ ) +} + +export default MyInput; \ No newline at end of file diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..ff93300 --- /dev/null +++ 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 ( + +
+ +
+ + ) +} + +export default NavBar; \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..4318abb --- /dev/null +++ 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( + +); \ No newline at end of file diff --git a/src/pages/Forms.jsx b/src/pages/Forms.jsx new file mode 100644 index 0000000..26a9a5a --- /dev/null +++ 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 ( +
+
+
+ + +
+
+
+
+ ) +} + +export default Forms; \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 0000000..91d3a01 --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +const Home = () => { + return ( +
+ Home +
+ ) +} + +export default Home; \ No newline at end of file diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx new file mode 100644 index 0000000..988bf31 --- /dev/null +++ b/src/pages/NewForm.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +const NewForm = () => { + return ( +
+ NEW +
+ ) +} + +export default NewForm; \ No newline at end of file diff --git a/src/router/router.js b/src/router/router.js new file mode 100644 index 0000000..ea76e8b --- /dev/null +++ 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: , + }, + { + path: "/forms", + element: , + }, + { + path: '/new', + element: + } +]); + +export default router \ No newline at end of file diff --git a/style.scss b/style.scss deleted file mode 100644 index d60afbd..0000000 --- a/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - background-color: blue; -} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 6bff764..6e03759 100644 --- 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 } \ No newline at end of file