diff --git a/package.json b/package.json new file mode 100644 index 0000000..8334119 --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "React-With-Webpack", + "version": "1.0.0", + "main": "index.jsx", + "author": "Arnaud Fauconnet", + "license": "MIT", + "scripts": { + "build": "webpack", + "serve": "webpack serve" + }, + "devDependencies": { + "@babel/core": "^7.19.3", + "@babel/preset-env": "^7.19.3", + "@babel/preset-react": "^7.18.6", + "babel-loader": "^8.2.5", + "css-loader": "^6.7.1", + "html-webpack-plugin": "^5.5.0", + "mini-css-extract-plugin": "^2.6.1", + "sass": "^1.55.0", + "sass-loader": "^13.1.0", + "style-loader": "^3.3.1", + "webpack": "^5.74.0", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1" + }, + "dependencies": { + "@types/jest": "^29.1.1", + "@types/node": "^18.8.2", + "@types/react": "^18.0.21", + "@types/react-dom": "^18.0.6", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "ts-loader": "^9.4.1", + "typescript": "^4.8.4" + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..a0b3562 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import "./style.scss" + +export default function App() { + return ( +
+

React with Webpack

+
+
This box should be centered
(and also this this text)
+
+
+ ); +} \ No newline at end of file diff --git a/src/html/template.html b/src/html/template.html new file mode 100644 index 0000000..d5516ff --- /dev/null +++ b/src/html/template.html @@ -0,0 +1,12 @@ + + + + + + + React with Webpack + + +
+ + \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..4b77fc7 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react' +import { createRoot } from 'react-dom/client' +import App from "./App" + +createRoot(document.querySelector("#root")).render() diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..b697a9b --- /dev/null +++ b/src/style.scss @@ -0,0 +1,31 @@ +$box-background: blue; +$container-background: lime; +$title-color: cyan; + +main { + h1 { + color: $title-color; + text-align: center; + } + + #container{ + display: flex; + background-color: $container-background; + width: 100vw; + height: 50vh; + align-items: center; + justify-content: center; + + #box{ + width: 50%; + height: 50%; + background-color: $box-background; + display: flex; + text-align: center; + align-items: center; + justify-content: center; + } + } + + +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..c262bc6 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "allowSyntheticDefaultImports": true, + "module": "es6", + "target": "es5", + "jsx": "react", + "allowJs": true, + "moduleResolution": "node" + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..98b5b79 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,62 @@ +const path = require("path") +const HtmlWebpackPlugin = require("html-webpack-plugin") +const MiniCssExtractPlugin = require("mini-css-extract-plugin") + +module.exports = { + mode: "development", + entry: { + bundle: path.resolve(__dirname, "src", "index.tsx") + }, + output: { + filename: "[name].[contenthash].js", + path: path.resolve(__dirname, "dist") + }, + module: { + rules: [ + { + test: /\.tsx?/, + use: 'ts-loader', + exclude: /node_modules/ + }, + { + test: /\.jsx?$/, + include: path.resolve(__dirname, 'src'), + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { "targets": "defaults" }], + '@babel/preset-react' + ] + } + } + }, + { + test: /\.s[ac]ss$/i, + use: [ + // Creates `style` nodes from JS strings + "style-loader", + // Translates CSS into CommonJS + "css-loader", + // Compiles Sass to CSS + "sass-loader", + ], + }, + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, "css-loader"], + }, + ] + }, + resolve: { + extensions: [".tsx", ".jsx", ".js"], + }, + plugins: [ + new HtmlWebpackPlugin({ + template: path.join(__dirname, "src", "html", "template.html"), + filename: "index.html", + title: "React with Webpack", + }) + ] +} \ No newline at end of file