karma/zucchetti-sa5
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

React with typescript, sass and webpack workign

Browse Source
This commit is contained in:
Fauconnet Arnaud 2022-10-13 09:50:30 +02:00
parent 7e01b19907
commit 2e62d4675b
7 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package.json Normal file
View File

@ -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"
}
}

13
src/App.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import "./style.scss"
export default function App() {
return (
<main id="root">
<h1>React with Webpack</h1>
<div id="container">
<div id="box">This box should be centered <br/>(and also this this text)</div>
</div>
</main>
);
}

12
src/html/template.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React with Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

5
src/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import App from "./App"
createRoot(document.querySelector("#root")).render(<App />)

31
src/style.scss Normal file
View File

@ -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;
}
}
}

12
tsconfig.json Normal file
View File

@ -0,0 +1,12 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}

62
webpack.config.js Normal file
View File

@ -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",
})
]
}