如何在Webpack 4中使用Reactjs开发版本

在Webpack 4中使用Reactjs开发版本，可以按照以下步骤进行：

首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。
创建一个新的项目文件夹，并在命令行中进入该文件夹。
初始化项目并生成package.json文件，可以运行以下命令：npm init -y
安装React和ReactDOM依赖，可以运行以下命令：npm install react react-dom
安装Webpack和相关的loader和插件，可以运行以下命令：npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react html-webpack-plugin --save-dev
在项目根目录下创建一个webpack.config.js文件，并添加以下配置：const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

 entry: './src/index.js',

 output: {

   path: path.resolve(__dirname, 'dist'),

   filename: 'bundle.js',

},

 module: {

   rules: [

       test: /\.js$/,

       exclude: /node_modules/,

       use: {

         loader: 'babel-loader',

         options: {

           presets: ['@babel/preset-react'],

},

},

},

],

},

 plugins: [

   new HtmlWebpackPlugin({

     template: './src/index.html',

}),

],

 devServer: {

   contentBase: path.join(__dirname, 'dist'),

   port: 3000,

},

};

在项目根目录下创建一个src文件夹，并在其中创建一个index.js文件作为入口文件。
在index.js文件中编写React组件的代码，例如：import React from 'react'; import ReactDOM from 'react-dom';

const App = () => {

 return <h1>Hello, React!</h1>;

};

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

在项目根目录下创建一个src文件夹，并在其中创建一个index.html文件作为模板文件。
在index.html文件中添加一个具有id为"root"的div元素，例如：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
在命令行中运行以下命令来启动开发服务器：npx webpack serve --mode development
打开浏览器，访问http://localhost:3000，你将看到一个显示"Hello, React!"的页面。

以上是在Webpack 4中使用Reactjs开发版本的基本步骤。在实际开发中，你还可以根据需要添加其他loader和插件，进行代码分割、优化等操作。