初始化项目空间

新建一个项目目录，在目录下执行：npm init -y此时将会生成 package.json 文件之后新建 src、config（配置webpack）文件夹，新建index.html文件

安装依赖文件

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader path -Dnpm i react react-dom

配置index.js文件

import React from 'react';import ReactDOM from 'react-dom';ReactDOM.render(你好，React-webpack5-template,document.getElementById('root'));

配置config中webpack配置文件

1、新建webpack.base.conf.js文件，部分代码仅供参考

"use strict";const path = require("path");const webpack = require("webpack");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {  // 入口起点  entry: {    app: "./src/index.js",  },  // 输出  output: {    path: path.resolve(__dirname, "../dist"),    filename: "[name].js",  },  // 解析  resolve: {    extensions: [".ts", ".tsx", ".js", ".json"],    alias: {      "@components": path.join(__dirname, "../src/components"),      "@utils": path.join(__dirname, "../src/utils"),      "@pages": path.join(__dirname, "../src/pages"),    },  },  // loader  module: {    rules: [      {        test: /\.js|jsx$/,        exclude: /(node_modules|bower_components)/, // 屏蔽不需要处理的文件（文件夹）（可选）        loader: "babel-loader",      },      {        //支持less        // npm install style-loader css-loader less-loader less --save-dev        test: /\.(le|c)ss$/, // .less and .css        use: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部      },    ],  },  // 插件  plugins: [    new HtmlWebpackPlugin({      filename: "index.html",      template: "index.html",      inject: "body",    }),  ],};

2、新建用于开发环境的webpack.dev.conf.js 文件

"use strict";const { merge } = require("webpack-merge");const baseWebpackConfig = require("./webpack.base.conf");const path = require("path");const webpack = require("webpack");module.exports = merge(baseWebpackConfig, {  // 模式  mode: "development",  // 调试工具  devtool: "inline-source-map",  // 开发服务器  devServer: {    static: path.resolve(__dirname, "static"),    historyApiFallback: true, // 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html    compress: true, // 启用gzip压缩    hot: true, // 模块热更新，取决于HotModuleReplacementPlugin    host: "127.0.0.1", // 设置默认监听域名，如果省略，默认为“localhost”    port: 8888, // 设置默认监听端口，如果省略，默认为“8080”  },  optimization: {    nodeEnv: "development",  },});

3、新建webpack.prod.conf.js文件

"use strict";const merge = require("webpack-merge");const baseWebpackConfig = require("./webpack.base.conf");const path = require("path");const webpack = require("webpack");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const UglifyJSPlugin = require("uglifyjs-webpack-plugin");module.exports = merge(baseWebpackConfig, {  // 模式  mode: "production",  // 调试工具  devtool: "#source-map",  // 输出  output: {    path: path.resolve(__dirname, "../dist"),    filename: "js/[name].[chunkhash].js",  },  // 插件  plugins: [new CleanWebpackPlugin(), new webpack.HashedModuleIdsPlugin()],  // 代码分离相关  optimization: {    nodeEnv: "production",    minimizer: [new UglifyJSPlugin()],    runtimeChunk: {      name: "manifest",    },    splitChunks: {      minSize: 30000,      minChunks: 1,      maxAsyncRequests: 5,      maxInitialRequests: 3,      name: false,      cacheGroups: {        vendor: {          test: /[\/]node_modules[\/]/,          name: "vendor",          chunks: "initial",        },      },    },  },});

新建.babelrc文件

{  "presets": ["latest", "react", "stage-2"],  "plugins": []}

修改package.json中的script代码

  "scripts": {    "dev": "webpack-dev-server --hot  --config config/webpack.dev.conf.js",    "start": "npm run dev",    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"  },

此时，package.json中部分代码如下

{  "name": "webpack-react-demo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "dev": "webpack-dev-server --hot  --config config/webpack.dev.conf.js",    "start": "npm run dev",    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"  },  "license": "ISC",  "devDependencies": {    "babel-core": "^6.26.3",    "babel-loader": "^7.1.5",    "babel-plugin-import": "^1.13.5",    "babel-preset-latest": "^6.24.1",    "babel-preset-react": "^6.24.1",    "babel-preset-stage-0": "^6.24.1",    "clean-webpack-plugin": "^4.0.0",    "css-loader": "^6.7.1",    "file-loader": "^6.2.0",    "html-webpack-plugin": "^5.5.0",    "less-loader": "^11.0.0",    "node-less": "^1.0.0",    "style-loader": "^3.3.1",    "url-loader": "^4.1.1",    "webpack": "^5.74.0",    "webpack-cli": "^4.10.0",    "webpack-dev-server": "^4.9.3",    "webpack-merge": "^5.8.0"  },  "dependencies": {    "less": "^4.1.3",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-router-dom": "^5.1.2"  }}