feat(webpack-react): add *.jsx transpiling to *.js for React.js
This commit is contained in:
parent
438d627d68
commit
640b2fdff3
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
|
@ -17,8 +17,16 @@
|
|||
"start": "webpack serve --config ./webpack.config.js --mode development"
|
||||
},
|
||||
"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-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.9.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,13 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>React with webpack</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Hello Webpack</h1>
|
||||
</div>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello React</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
const Home = () => {
|
||||
return <div>React.js Lambda Function Component</div>
|
||||
}
|
||||
|
||||
export default Home
|
|
@ -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 />);
|
||||
|
|
|
@ -4,6 +4,20 @@ const path = require('path');
|
|||
module.exports = {
|
||||
//bundle *.js from this entry point
|
||||
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
|
||||
output: {
|
||||
path: path.resolve(__dirname, './public'),
|
||||
|
|
Loading…
Reference in New Issue