package.json

{" name ":" webpack ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" start ": "webpack serve", "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "" and" license ", "ISC", "devDependencies" : {" @ Babel/core ":" ^ 7.14.6 ", "@ Babel/preset - env" : "^ 7.14.5 @", "Babel/preset - react" : "^ 7.14.5", "Babel - loader" : "^ 8.2.2", "the clean - webpack - plugin" : "^ 4.0.0 - alpha. 0" and "CSS - loader" : "^ 5.2.6", "friendly - errors - webpack - plugin" : "^ 1.7.0", "HTML - webpack - plugin" : "^ 5.3.1 postcss", ""," ^ 8.3.4 ", "postcss - cssnext" : "^ 3.1.0", "postcss - loader" : "^ 6.1.0", "postcss - preset - env" : "^ 6.7.0 style -", "loader" : "^ 2.0.0", "webpack" : "^ 5.39.0", "webpack - cli" : "^ 4.7.2", "webpack - dev - server" : "^ 3.11.2"}, "dependencies" : {" react ":" ^ 17.0.2 ", "the react - dom" : "^ 17.0.2"}}Copy the code

webpack.congig.js

const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = { mode: 'development', devtool: 'inline-source-map', entry: { app: './index.js' }, output: { path: path.resolve(__dirname, './dist'), filename: '[name].bundle.js', }, module: { rules: [ // JavaScript { test: /\.m?js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, // Images { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', }, // Fonts and SVGs { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, // CSS, PostCSS, and Sass { test: /\.(scss|css)$/, use: ['style-loader', { loader: 'csS-loader ', options: {importLoaders: 1,},},' postCSs-loader '],},],}, // devServer: {historyApiFallback: true, contentBase: path.join(__dirname, './dist'), open: false, hot: true, quiet: true, port: 3000, host: "127.0.0.1", allowedHosts: ['.oribar.com', 'oribar.com', 'localhost', '127.0.0.1']}, plugins: New HtmlWebpackPlugin({title: 'tiemuzhen big screen display ', template: path.resolve(__dirname, './index.html'), filename: 'index.html',}), // Delete the original file every time you pack, Generate a new file new CleanWebpackPlugin (), new FriendlyErrorsWebpackPlugin (), // Webpack integration esLint uses the eslintrc.js file new ESLintPlugin({overrideConfigFile: New webpack.progressplugin ({activeModules: true,})],}Copy the code

.babelrc

 {
  "presets": [
    ["@babel/preset-env"],
    ["@babel/preset-react"]
  ]
}
Copy the code

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

The directory structure