├── .babelrc
├── public
└── index.html
├── src
└── index.js
├── .gitignore
├── package.json
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ]
6 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | function App() {
5 | return (
6 |
7 |
Xin chào anh em F8!
8 | Yêu anh em nhiều :*
9 | Anh em có yêu lại không?
10 |
11 | )
12 | }
13 |
14 | ReactDOM.render(, document.getElementById('root'))
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | /public/meta.json
15 |
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | home-backdrop.mp4
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack-dev-server --mode development --open --hot",
9 | "build": "webpack --mode production"
10 | },
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "@babel/core": "^7.15.5",
15 | "@babel/preset-env": "^7.15.6",
16 | "@babel/preset-react": "^7.14.5",
17 | "babel-loader": "^8.2.2",
18 | "html-webpack-plugin": "^5.3.2",
19 | "webpack": "^5.55.0",
20 | "webpack-cli": "^4.8.0",
21 | "webpack-dev-server": "^4.3.0"
22 | },
23 | "dependencies": {
24 | "react": "^17.0.2",
25 | "react-dom": "^17.0.2"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const HtmlWebpackPlugin = require("html-webpack-plugin");
3 |
4 | module.exports = {
5 | entry: "./src/index.js", // Dẫn tới file index.js ta đã tạo
6 | output: {
7 | path: path.join(__dirname, "/build"), // Thư mục chứa file được build ra
8 | filename: "bundle.js" // Tên file được build ra
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.js$/, // Sẽ sử dụng babel-loader cho những file .js
14 | exclude: /node_modules/, // Loại trừ thư mục node_modules
15 | use: ["babel-loader"]
16 | },
17 | {
18 | test: /\.css$/, // Sử dụng style-loader, css-loader cho file .css
19 | use: ["style-loader", "css-loader"]
20 | }
21 | ]
22 | },
23 | // Chứa các plugins sẽ cài đặt trong tương lai
24 | plugins: [
25 | new HtmlWebpackPlugin({
26 | template: "./public/index.html"
27 | })
28 | ]
29 | };
--------------------------------------------------------------------------------