``` webpack.config.js ``` ``` var path = require('path'); var webpack = require('webpack'); var HtmlwebpackPlugin = require('html-webpack-plugin'); var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { entry: { app: path.resolve(APP_PATH, 'index.jsx') }, output: { path: BUILD_PATH, filename: 'bundle.js' }, devtool: 'eval-source-map', devServer: { historyApiFallback: true, hot: true, //inline: true, compress: true }, module: { rules: [ { test: /\.jsx?$/, loader: 'eslint-loader', include: APP_PATH } ], rules: [ { test: /\.jsx?$/, loader: 'babel-loader', include: APP_PATH } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'my first react app' }) ], resolve: { extensions: ['', '.js', '.jsx'] } } ``` ``` package.json ``` ``` { "name": "react3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server --hot --mode development", "start": "webpack --config webpack.config.js --mode development", "mo": "webpack --mode development", "d": "webpack --watch" }, "author": "", "license": "ISC", "devDependencies": { "@webpack-cli/serve": "^1.6.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-react-hmre": "^1.1.1", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.24.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "html-webpack-plugin": "^5.3.2", "webpack": "^5.57.1", "webpack-cli": "^4.9.0", "webpack-dev-server": "^4.3.1" }, "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" } } ``` ``` .eslintrc ``` ``` { "extends":"airbnb", "rules":{ "comma-dangle":["error","never"] } } ``` .babelrc ``` { "presets": ["es2015","react"], "env":{ "devlopment":{ "presets":[ "react-hmre" ] } } } ``` ``` index.jsx ``` ``` import React from 'react'; import ReactDOM from 'react-dom'; class Index extends React.Component{ constructor(props){ super(props); } render(){ return( <div className="container"> <h1>Hello4 React</h1> </div> ) } } const app = document.createElement('div'); document.body.appendChild(app); ReactDOM.render(<Index />,app); ```