Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1mt142/create-react-app-by-webpack
https://github.com/1mt142/create-react-app-by-webpack
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1mt142/create-react-app-by-webpack
- Owner: 1mt142
- Created: 2023-07-20T09:53:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-20T10:03:56.000Z (over 1 year ago)
- Last Synced: 2023-07-20T11:26:58.061Z (over 1 year ago)
- Language: JavaScript
- Size: 113 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#1st Step::
npm init -y
#2nd Step:
```bash
npm i react react-dom
```
```bash
npm i react react-dom
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
```
#3rd Step: Create .bablerc file
```javascript
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
#4 4. Create a webpack.config.js file
```javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
output: {
path: path.join(\_\ _dirname, "/dist"), // the bundle output path
filename: "bundle.js", // the name of the bundle
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html", // to import index.html file inside index.js
}),
],
devServer: {
port: 3030, // you can change the port
},
module: {
rules: [{
test: /\.(js|jsx)$/, // .js and .jsx files
exclude: /node_modules/, // excluding the node_modules folder
use: {
loader: "babel-loader",
},
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)\$/, // to import images and fonts
loader: "url-loader",
options: {
limit: false
},
},
],
},
};
```
#5 5. Create an /src folder and create the following files inside it
|-- src
|-- App.js
|-- App.scss
|-- index.html
|-- index.js
## App.js
```javascript
import React from "react";
const App = () => {
return
Hello React
;
};
export default App;
```
## App.scss
```javascript
h1 {
color: red;
}
```
## index.html
```javascript
React with Webpack
```
## index.js
```javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./App.scss";
const el = document.getElementById("app");
ReactDOM.render(, el);
```
## add serve and build script
```bash
"scripts": {
"serve": "webpack serve --mode development",
"build": "webpack --mode production"
},
```
in package.json file
Run the app with
```bash
npm run serve
```
Open your browser on http://localhost:3030/
#Build The App
```bash
npm run build
```