2.1.nodejs使用react的准备工作以及webpack配置

本文链接：https://blog.youkuaiyun.com/weixin_47870554/article/details/106728510

本文介绍了在Node.js环境下，如何初始化React项目，安装相关依赖，特别是Webpack的配置过程，包括基本的React、Babel和Webpack依赖的安装，以及Webpack配置文件的创建和打包操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0.前提：

前置知识是javascript、es6、nodejs、npm、webpack、react，需要对这些有一定地了解，才能理解下面的代码，不然只是单纯的复制。

js(https://blog.youkuaiyun.com/weixin_47870554/article/details/106152443)

webpack(https://blog.youkuaiyun.com/weixin_47870554/article/details/106648259)

react(https://blog.youkuaiyun.com/weixin_47870554/article/details/106688239)

1.项目初始化

随便创建一个用作练习的文件夹，将它初始化一个npm项目，方便对各种依赖的管理。输入以下命令（默认已经安装好nodejs）

npm init -y

会快捷地创建一个json文件，帮助管理依赖。如果没有这个文件的话，在后续删除依赖的时候，我有了删除依赖不完全的问题。

2.开始安装相关依赖

基本的react依赖：

npm install react react-dom --save-dev

基本的banel依赖（用以配置规则，转化jsx、js代码，可以兼容不支持es6的浏览器等）

npm install  @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

基本的webpack依赖

npm install webpack webpack-cli webpack-dev-server --save-dev

如果全局webpack没有安装好的话，安装一个全局webpack：

npm install webpack webpack-cli webpack-dev-server -g

使用 npm list --depth 0、 npm list --depth 0 -g检测是否安装好。

3.webpack配置

开始配置webpack（不了解的话，可以看https://blog.youkuaiyun.com/weixin_47870554/article/details/106648259）

安装相关的插件：

npm install html-webpack-plugin open-browser-webpack-plugin --save-dev

在项目文件下创建一个webpack配置文件webpack.config.js，写入如下配置：

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const webpack = require('webpack')

module.exports = {
	entry: './demo.js',
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.jsx?/,
				// 排除 node_modules 目录下的文件，防止被打抱
				exclude: path.resolve(__dirname, 'node_modules'),
				use: {
					loader: 'babel-loader',
					options: {
						babelrc: false,
						presets: [
							require.resolve('@babel/preset-react'),
							[require.resolve('@babel/preset-env', {module: false})],
						],
					}
				}
			}
		]
	},
	plugins: [
		new HtmlWebPackPlugin(),
		new OpenBrowserPlugin({
		  url: 'http://localhost:8080'
		}),
		new webpack.HotModuleReplacementPlugin(),
	],
	devServer: {
		hot: true
	}
};

创建demo.js,代码如下：

import React from 'react'
import ReactDOM from 'react-dom'

const Hello = () => {
	return <h1>Hello, world!</h1> ;
}

export default Hello

ReactDOM.render(
	<Hello/>,
	document.body
);

可以执行webpack，进行打包，也可以执行webpack-dev-server，进行查看。

结果如下：