dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(webpack-react): add *.jsx transpiling to *.js for React.js

This commit is contained in:
dancingCycle 2022-06-07 09:39:54 +02:00
parent 438d627d68
commit 640b2fdff3
6 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webpack-react/.babelrc Normal file
View File

@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

8
webpack-react/package.json
View File

@ -17,8 +17,16 @@
"start": "webpack serve --config ./webpack.config.js --mode development" "start": "webpack serve --config ./webpack.config.js --mode development"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
"webpack": "^5.73.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.2" "webpack-dev-server": "^4.9.2"
},
"dependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0"
} }
} }

17
webpack-react/public/index.html
View File

@ -1,13 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <title>Hello React</title>
<title>React with webpack</title> </head>
</head> <body>
<body> <div id="root"></div>
<div>
<h1>Hello Webpack</h1>
</div>
<script src="./bundle.js"></script> <script src="./bundle.js"></script>
</body> </body>
</html> </html>

7
webpack-react/src/components/home.jsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
const Home = () => {
return <div>React.js Lambda Function Component</div>
}
export default Home

11
webpack-react/src/index.js
View File

@ -1 +1,10 @@
console.log("Hello World") import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/home';
//since react 18
import { createRoot } from 'react-dom/client';
//create root container
const root = createRoot(document.getElementById("root"));
//render root app
root.render(<Home />);

14
webpack-react/webpack.config.js
View File

@ -4,6 +4,20 @@ const path = require('path');
module.exports = { module.exports = {
//bundle *.js from this entry point //bundle *.js from this entry point
entry: path.resolve(__dirname, './src/index.js'), entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
{
//test all *.js using babel-loader
//test all *.jsx (e.g. React.js) using babel-loader
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
//create output file to be linked to index.html //create output file to be linked to index.html
output: { output: {
path: path.resolve(__dirname, './public'), path: path.resolve(__dirname, './public'),