Created
August 11, 2025 18:47
-
-
Save KosarevDmitry/fa4aec53fcdc642c44cabf257de76f80 to your computer and use it in GitHub Desktop.
webpack with react example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm init -y | |
| npm install react react-dom | |
| npm install --save-dev webpack webpack-cli webpack-dev-server | |
| npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader | |
| npm install --save-dev html-webpack-plugin | |
| mkdir public | |
| mkdir src | |
| cat> webpack.config.js<< EOF | |
| const path = require('path'); | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| module.exports = { | |
| entry: './src/index.jsx', | |
| output: { | |
| path: path.resolve(__dirname, 'dist'), | |
| filename: 'bundle.js', | |
| clean: false, // or true | |
| }, | |
| resolve: { | |
| extensions: ['.js', '.jsx'], | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(js|jsx)\$/, | |
| exclude: /node_modules/, | |
| use: 'babel-loader', | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new HtmlWebpackPlugin({ | |
| template: './public/index.html', | |
| }), | |
| ], | |
| devServer: { | |
| static: { | |
| directory: path.join(__dirname, 'dist'), | |
| }, | |
| compress: false, // or true | |
| port: 3000, | |
| open: true, | |
| }, | |
| mode: 'development', | |
| devtool: false // real code without eval func | |
| }; | |
| EOF | |
| cat > .babelrc << EOF | |
| { | |
| "presets": ["@babel/preset-env", "@babel/preset-react"] | |
| } | |
| EOF | |
| cat > public/index.html << EOF | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>React Webpack App</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| </body> | |
| </html> | |
| EOF | |
| cat> src/index.jsx <<EOF | |
| import React from 'react'; | |
| import ReactDOM from 'react-dom/client'; | |
| const App = () => { | |
| return <h1>Hello React with Webpack!</h1>; | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| EOF | |
| npm pkg set scripts.start="webpack serve --mode development" | |
| npm pkg set scripts.build="webpack --mode production" | |
| npm start | |
| # see resulting bundle.js in chrome devtool | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment